jQuery DataTables - Slow initiation, “Normal” html table shown in the beginning

Question

I\'m using jQuery DataTable plugin, but I got a concern where the scripts loading seems to take some time, so my web page is always displaying the ordinary html table first, and

Answer 1

My working solution is a "dirty" trick to hide the table without using "display:none". The ordinary "display:none" style causes initialization problem for jQuery Data Tables.

First of all, place your data table in a wrapper div:

...data table html as described in jQuery Data Table documentation...

In CSS:

.dataTableParentHidden {overflow:hidden;height:0px;width:100%;}

This solution hides the data table without using "display:none".

After the data table initialization you have to remove class from wrapper to reveal the table:

$('#yourDataTable').DataTable(...);
$('#dataTableWrapper').removeClass('dataTableParentHidden');