1

I understand that this question has been discussed before but I had tried countless times on fixing the issue and still has no luck.

This is how it looks when the page first loads and I click on the next tab. (set Unpaid tab as active, has no issues) Before

This is what happens after I click any position at the column header. It fixes the problem but once reload again, it goes back to square one. After

My code: http://jsfiddle.net/ow6tcz4x/5/

I tried:

#1
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$($.fn.dataTable.tables(true)).DataTable()
  .columns.adjust();
});

#2
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$($.fn.dataTable.tables(true)).DataTable()
  .scroller.measure();
});

#3 (table variable as an example)
table.columns.adjust().draw();

Basically most of the solutions from here datatable jquery - table header width not aligned with body width and https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/ does not seem to work for me. Could anyone assist me with this? Thank you in advance.

Jenkins2000
  • 77
  • 6
  • Your Fiddle does not show the problem you are describing. The Fiddle is missing all of the libraries it needs (jQuery, DataTables, and others - Bootstrap?). Please provide a [mre]. You can provide this directly in your question using a [Stack Snippet](https://meta.stackoverflow.com/q/358992/12567365), instead of a Fiddle, if you want. – andrewJames Oct 27 '22 at 15:13
  • 1
    @andrewJames hi my apologise, I had updated the fiddle cdns and libraries. Please do have a look. – Jenkins2000 Oct 27 '22 at 15:19

1 Answers1

2

Your 'shown.bs.tab' event is not firing because of the selector you are using:

'a[data-toggle="tab"]'

You can see that is the case by adding a console logging statement to the function. The statement will never be logged. The DataTables adjust() function does not get executed.

Change the selector to this:

'button[data-bs-toggle="tab"]'

So, you will have:

$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
    //console.log( "tab changed!" );
    $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
});

Reference: There is an official Bootstrap 5 example here.

andrewJames
  • 19,570
  • 8
  • 19
  • 51
  • My god, thank you so much man, you really helped me big time one this one! – Jenkins2000 Oct 27 '22 at 15:44
  • 1
    If you are not familiar with it, your browser's inspector is very helpful. Typically (depends on your browser), you ca right-click on one of the tab buttons and choose "inspect". You will see the type of HTML used - and that will allow you to see how that HTML needs to be selected. – andrewJames Oct 27 '22 at 15:46