DataTable.js doesn't load properly when using TABS

Question

I use DataTables.js to generate tables. It\'s great, works fine. I wanted to add Tabs to my \"pages\" but it seems that when DataTables is used on other than primary tab it

Answer 1

The issue is with datatables, it is failing to render correctly when the table is within a hidden container. You can verify it just by removing display: none style from .tab-pane, all tabs shows up and all tables render correctly. But you have to hide then tabs right?

Until datatables developers fixes this issue you have only one way to go. Keep all the tab panes visible when page loads, let datatables render all the tables, then hide the tab panes. So you have to tweak your tabs.

It seems datatables can render the tables even if container's visibility is set to hidden if display is set to block. You can use this trick to hide the flash of all the tab panes while the page is still loading. Just to give you an idea, add the following at the bottom of your page withing the body tag.