Foren

Integration Datatables with Liferay 7 UI

thumbnail
Mohammed Rawoof Shaik, geändert vor 6 Jahren.

Integration Datatables with Liferay 7 UI

Junior Member Beiträge: 37 Beitrittsdatum: 25.09.16 Neueste Beiträge
Hello LR Community,

Background:
This is a spin-off from this thread. I followed this guide.

My code is below,
<script>
	$(document).ready(function() {
		debug('>> document.ready()');
		
		$('#table-id').DataTable();
		
		debug('<< document.ready()');
	});
</script>
<c:foreach items="${javaObjectList}" var="list">
				</c:foreach><table id="table-id" class="table table-striped">
		<thead>
			<tr>
				<th>Label</th>
				...
			</tr><tr>
		</tr></thead>
		<tbody>
			<tr>
					<td>${list.variable}</td>
					...
				</tr>
			
		</tbody>
	</table>

I've disabled the 'Expose global' feature, i.e., Control Panel -> Configuration -> System settings -> JavaScript Loader -> Expose global

Issue:
Only the first column header renders. See attached 'lr-datatables.png'. And the browser console logs have the error - "Uncaught TypeError: Cannot read property 'cell' of undefined". See attached 'datatable-error.PNG'.

The pagination and search bar work, but the column headers after the first column are not present.

What am I missing?
Ricardo Vieira, geändert vor 5 Jahren.

RE: Integration Datatables with Liferay 7 UI

Junior Member Beiträge: 54 Beitrittsdatum: 16.08.10 Neueste Beiträge
I know this is a few months late, but if anyone is having this issue, I found that the problem was the formation of the table, dataTables requires a well formed table. It must contain <thead> and <tbody> tags, in my case it was cause the header columns didnt have the same number has the body.
thumbnail
Mohammed Rawoof Shaik, geändert vor 5 Jahren.

RE: Integration Datatables with Liferay 7 UI (Antwort)

Junior Member Beiträge: 37 Beitrittsdatum: 25.09.16 Neueste Beiträge
Thanks for responding. I played around with the table code and found that, this is a generic error thrown for multiple ways in which a table is not well formed. In my case, I changed the below code,

	
		Label
		...
	

to,

	Label
	...

And it worked.