Question

When I am using DataTables to replace a dataset in a table, it works great, but sometimes when you reload the page it takes half a second to wrap the table showing the original table markup for that brief amount of time. I was wondering if there is a way to perhaps display the page contents only when DataTables has finished wrapping the table?

Answer 1

There are a few ways you could do it. The easiest is probably the following:

First, set your table to have display:none via CSS or even (gasp) with an inline-style in your markup.

Then in your DataTables initialization, use the fnDrawCallback to show the table:

"fnDrawCallback": function() {
   $(this).show();
}

Now, remember that the actual table ends up having divs above and below (for the header and footer). Refreshing the page will likely keep these on display while the table itself refreshes. If you’d rather just hide and show absolutely everything, you’ll need to wrap your table in a container div, and then instead of $(this).show() you would use $('.container').show()