Broken table head if jQuery.show() is used

flob

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

allan

Use columns.adjust() when the table has been shown.

Allan

flob

Thanks for the feedback.
How do you call that within "initComplete": function () { // here }?

allan

Is the table visible when initComplete executes? Normally the event / callback you would need to wait for would be from jQuery / whatever is doing the show / hide.

Allan

flob

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 initComplete to fire some other functions like hiding the spinner without any problems as well.

Thanks.
Flo

allan

jQuery show accepts a callback - you would call columns.adjust() in there:

$('#my-container').show( function () {
  myTable.columns.adjust();
} );

Btw - using simply $('#my-container') will be faster than $('div#my-container'). With the latter all div elements 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