DataTables does not get all data

Harry33

i recenlty tried dataTables in one of my projects and I'm facing an issue:
Whenever the data amount gets over ~180 entries the total count of the entries is always lower than the acutal amount of data rows + it doesn't show all data after i have performed a search/sort action.

Attached the code from the table creation (Code is in c++ using POCO libary and metroUI as CSS)

My suspicion is that the dataTables element is created before the loop created all DOM elements and therefore not all data is visible.

Any hints or suggestions? Thx in advance, br,
Harry

allan

I don't see your DataTable initialisation there, but my guess is that if you "View source" on the page, you'll find that the HTML being created doesn't include all the rows. I suspect this isn't a DataTables issue, but rather something limiting the data being output (or read).

Try disabling DataTables and checking if it works then?

Allan

Harry33

Hi Allan,

when i disable DataTables it works yes also on the first load of the page all items are shown.
If i view the HTML source (via the developer browser options - element inspector) i can see ALL <tr> tags at the first load but the items after the number that is shown as total count in the dataTables summary (showing 50 of 187 entries) are missing the dataTables specific tags --> e.g. <tr class="row" class="odd" or "even" is missing since the e.g. 187 entry.

If i disable the dataTable completely the table shows all data again.
I uploaded some screenshots + a db excerpt of a table where to problem occurs + the "view source"-view of the html page

allan

Thanks for the files. Unfortunately I'm not seeing what is causing the issue there. Could you link to a page showing the issue so I can trace it through please? If you don't want to make it public, send me a PM by clicking my name above and then "Send message".

Allan

Harry33

Hi Allan,

thx for your help so far but i think i found a solution:
i removed the data-role entry from my table:

<

table id="portion_table" class="dataTable table striped hovered cell-hovered border bordered" data-role="datatable">

and added the following code to my page:

$(document).ready(function() { var table = $('#portion_table').DataTable(); table .rows() .invalidate() .draw(); });

Afterwards the table loaded properly.
My suspicion is still that with the data-role attribute the datatable is created before the whole table is loaded/created by the for loop (and therefore all DOM elements) and therefore the problem appears.

I will test further and let you know

Harry33

It seems to be that this was the issue - can i mark it as answer so others can find it easier?
Is this a common known "issue"?

allan

I've marked it as the answer now. I've never encountered that issue before as far as I am aware!

Allan