DataTable not styling correctly when FadeIn() used

sjw01

I have graphs and tables (including DataTables) on pages which load using jQuery
Because some data loads on $(document).ready(); I have decided to use fadeIn() to show the page delayed (providing enough time for the page to draw and elements to load)
BUT ... Now my dataTable has a width:0 applied to it making it look bad... Why? How do I remove this unnecessary action?

allan

You need to use columns.adjust() when the table is made visible.

The problem is that when you hide the element (display:none) it has no height or width so its impossible for DataTables to do any width calculations (hence why it turns out as 0). columns.adjust() immediately after your fadeIn will fix that.

Allan

sjw01

I found the issue was with the way I loaded the DataTable. Loading the data via ajax meant that the data was loading at the same time as the DataTable. Effectively, I believe that the DataTable was being loaded a fraction of a second before the data was present from the Ajax call.

To fix it, I simply delayed the loading of the DataTable by putting it inside a function and then using setTimeout()

setTimeout(function() {initialiseDataTable()}, 100);

kthorngren

Ajax is an asynchronous process. If you have code that depends on Datatables being fully initialized with the data loaded then use initComplete. Don't use the setTimeout but move your function call into initComplete.

Kevin