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

Option 1

Do a responsive.recalc() on tabButton click. This will probably require the least amount of work.

tabButtons.map(function (button) {
  button.addEventListener("click", function () {
    document
      .querySelector("li a.active.button")
      .classList.remove("active");
    button.classList.add("active");

    document
      .querySelector(".tab-pane.active")
      .classList.remove("active");
    document
      .querySelector(button.getAttribute("href"))
      .classList.add("active");


    /****  ADDED RESPONSIVE.RECALC  ****/
    $(button.getAttribute("href"))
      .find("table.display.compact")
      .DataTable().responsive.recalc();
  })
})

Option 2

Initialize DataTable on tabButton click. In addition to the code shown below you will have to remove your other pieces of code that initializes the DataTable for the initially inactive tabs (Test1 and Test2).

I've found that this produces more consistent layout than Option 1.

tabButtons.map(function (button) {
  button.addEventListener("click", function () {
    document
      .querySelector("li a.active.button")
      .classList.remove("active");
    button.classList.add("active");

    document
      .querySelector(".tab-pane.active")
      .classList.remove("active");
    document
      .querySelector(button.getAttribute("href"))
      .classList.add("active");


    /**  ADDED DATATABLE INITIALIZATION HERE  **/
    var tabPaneToActivate = document
      .querySelector(button.getAttribute("href"))
    tabPaneToActivate.classList.add("active");
    tabPaneToActivate.querySelectorAll("table.display.compact").forEach(function (el) {
      if (!$.fn.dataTable.isDataTable(el)) {
        /** ^^^ Only initialize once ^^^ **/
        $(el).DataTable({
          dom: "Bfrtip",
          buttons: [
            "copyHtml5",
            "excelHtml5",
            "csvHtml5",
            "pdfHtml5"
          ],
          colReorder: true,
          paging: true,
          pagingType: ["full_numbers"],
          lengthMenu: [
            [15, 25, 50, 100],
            -1,
            [15, 25, 50, 100],
            "All"
          ],
          ordering: true,
          info: true,
          procesing: true,
          responsive: {
            details: true
          },
          select: true,
          searching: true,
          stateSave: true
        });

      }

    })
  })
})