Broken table head if jQuery.show() is used
Broken table head if jQuery.show() is used
flob
Posts: 3Questions: 1Answers: 0
Hi there,
I want to display a huge DataTable only if it's ready / fully loaded.
So first of all, I set the table to display: none.
Then I use the initComplete function and say $("table#id").show(), but the table head is either not visible at all or broken, which means all table heads together / overlapped.
If you use $(table).fadeOut() at the beginning instead of $(table).hide() or display: none, it works fine 
But I want to see nothing but a spinner until the DataTable is ready.
Thanks in advance!
Kind regards
Flo
This discussion has been closed.
Answers
Use
columns.adjust()when the table has been shown.Allan
Thanks for the feedback.
How do you call that within
"initComplete": function () { // here }?Is the table visible when
initCompleteexecutes? Normally the event / callback you would need to wait for would be from jQuery / whatever is doing the show / hide.Allan
Good morning Allan,
mh, I guess I don't understand your question.
I'll try to abstract this a little:
It doesn't matter if you hide and show the table itself or if you make an container div around the table, which means, it doesn't matter if you do it via
$("div#my-container").show();or via$("table#my-table").show();- the DataTable head will be broken like:It you do not hide the container or the table itself, DataTable draws the table correctly without any problems.
You can use the
initCompleteto fire some other functions like hiding the spinner without any problems as well.Thanks.
Flo
jQuery
showaccepts a callback - you would callcolumns.adjust()in there:Btw - using simply
$('#my-container')will be faster than$('div#my-container'). With the latter alldivelements are selected, and then the id found from inside them. With the former, since the id is unique, the browser can just lookup its list of id'ed elements.Allan