DataTable.js doesn't load properly when using TABS

One way of doing this is to initialize Datatables when the tab becomes active, and not at the page load.

$(document).ready(function() {
  $('a').on('click', function() {
    if ($(this).attr('href')) == "#Test1" && !$.fn.dataTable.isDataTable("#DT-iuyx2s7b") && !$.fn.dataTable.isDataTable("#DT-2u8iw0gr")) {
        $("#DT-iuyx2s7b").DataTable(...);
        $("#DT-2u8iw0gr").DataTable(...);
    } else if ($(this).attr('href')) == "#Test2" && !$.fn.dataTable.isDataTable("#DT-vdk1ir62")) {
        $("#DT-vdk1ir62").DataTable(...);
    }
  });
});

I don't take into consideration the first tab because it's the only visible one on page load.

JSfiddle : https://jsfiddle.net/dqec4xyw/

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.

<style id="datatables_crazyfix">
.tab-content .tab-pane {
    visibility: hidden;
    display: block;
}
</style>
<script>
    jQuery(function($){
        $("#datatables_crazyfix").remove();
    });
</script>