Two DataTables in 2 Bootstrap tabs

arosner

I am attempting to populate 2 datatables on the same page, each under a different tab. I get no console errors. The first tab looks ok, but the second tab does not show search textboxes. Instead of search textboxes, the second tab just repeats the header in read/only labels.

I noticed the question, https://datatables.net/forums/discussion/75019/many-tables-in-tabs-on-a-single-page-not-initializing-column-search-boxes-correctly. Looks like I am trying to do the same thing.

What are the pertinent parts of the example that I need to implement?

For example, I noticed The following code differences:

1) Added code to document.Ready

$(document).ready(function () {
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
let current = e.target;
let tabTable = current.hash + 'Table';

if ( ! $.fn.DataTable.isDataTable( tabTable ) ) {
  switch(tabTable){
    case "#tab_1Table":
      initTab_1();
      break;
    case "#tab_2Table":
      initTab_2();
      break;
    default: //Lets not do anything if we don't recognize the tab/table
      break;
  }
}

});
});

2) Each DataTables function has the following property:
dom: "tr" +
"<'my-wrapper'<'pagination'p><'dt-info'i>>",

3) Each DataTables initComplete function has the following method call at the end:

    api.columns.adjust();

4) Some DataTables initComplete functions have a second "wrapper" parameter when accessing a cell (others do not):

                var cell = $('.filters th', '#tab_1Table_wrapper').eq(
                    $(api.column(colIdx).header()).index()

or

                var cell = $('.filters th').eq(
                    $(api.column(colIdx).header()).index()

kthorngren

See this BS tabs example for a basic solution.

Kevin