DataTable not styling correctly when FadeIn() used
DataTable not styling correctly when FadeIn() used
sjw01
Posts: 67Questions: 36Answers: 1
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?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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 yourfadeInwill fix that.Allan
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()
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 intoinitComplete.Kevin