odd issue: displaying table twice (briefly the first time)
odd issue: displaying table twice (briefly the first time)
kshipp
Posts: 6Questions: 0Answers: 0
Using DataTables 1.9.4 with jQuery 1.8.2:
I've searched the forums but can't find a solution to this issue.
When the page loads, I first see the full result set (all rows), briefly, then the DataTable displays only the 10 rows correctly. This page has a lot of columns (30). Why the brief display of all records? Anyone have any ideas on why this happens?
Unfortunately, the page is on a secure site, so I can't share a link here, but I can share part of the document ready function. One caveat, my columns are dynamically generated ahead of the document ready javascript, which is the PHP variable ($aocolumns) you see below.
Part of document ready function:
// start snippet:
var oTable = $('#maintable').dataTable( {
"aaSorting": [[ 0, "asc" ]],
"aoColumns": [
{ "sType": "num-html" },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
<?= $aocolumns;?>
],
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"bStateSave": true, // save state? not really...we have to use localstorage
"fnStateSave": function(oSettings, oData) { save_dt_view(oSettings, oData); }, // required! This saves the state to localstorage
"fnStateLoad": function(oSettings) { return load_dt_view(oSettings); }, // required! This loads the state from localstorage
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"iCookieDuration": 60*60*48 // 2 days
} );
new FixedHeader( oTable ); // create floating header in Datatable
oTable.fnFilterClear(); // Reset/Remove all filtering on page load
// end snippet
I've searched the forums but can't find a solution to this issue.
When the page loads, I first see the full result set (all rows), briefly, then the DataTable displays only the 10 rows correctly. This page has a lot of columns (30). Why the brief display of all records? Anyone have any ideas on why this happens?
Unfortunately, the page is on a secure site, so I can't share a link here, but I can share part of the document ready function. One caveat, my columns are dynamically generated ahead of the document ready javascript, which is the PHP variable ($aocolumns) you see below.
Part of document ready function:
// start snippet:
var oTable = $('#maintable').dataTable( {
"aaSorting": [[ 0, "asc" ]],
"aoColumns": [
{ "sType": "num-html" },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
<?= $aocolumns;?>
],
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"bStateSave": true, // save state? not really...we have to use localstorage
"fnStateSave": function(oSettings, oData) { save_dt_view(oSettings, oData); }, // required! This saves the state to localstorage
"fnStateLoad": function(oSettings) { return load_dt_view(oSettings); }, // required! This loads the state from localstorage
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"iCookieDuration": 60*60*48 // 2 days
} );
new FixedHeader( oTable ); // create floating header in Datatable
oTable.fnFilterClear(); // Reset/Remove all filtering on page load
// end snippet
This discussion has been closed.
Replies
Looks like your table is DOM sourced, so you are getting a flash of unscripted content. The browser has painted the page before DataTables has run and repainted the table. Only way to try and stop this is to make DataTables run as soon, and as fast as possible (if I knew how to make it faster, I'd do so :-) ).
Not a brilliant answer I know, but I'm not certain what can be done. Ajax loading is an option perhaps?
Allan
I'll see if I can have it load the DataTable as soon as the PHP data is ready (before the page is loaded).
Thanks, again, for the reply. I love DataTables!