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

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/