CODEWITHSUNDEEP
jquerydatatables
mohan raj
mohan raj

Reputation: 1

jQuery data table responsive not working in Bootstrap tabs

I am new to jQuery data table and I am now working with the responsive jQuery data table. Here I am facing an issue with the jQuery data table responsive part. The first tab is working fine, when I go to the second tab "payee" it's not working (the plus symbol will not appear). The button "Click Me Popup" with a plus symbol also won't appear.

The first column plus symbol will appear if the table is larger. The second tab has large columns and here the plus symbol should appear in the first column but it's not shown.

I don't know the reason, I have tried the below script, but hasn't helped me.

Fiddle link: https://jsfiddle.net/97sos7dm/36/

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

Upvotes: 0

Views: 1839

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58920

You forgot to initialize the table in the second tab.

$('#invoicedet, #invoicepayeedet').DataTable({
   // ... skipped ...
});

Otherwise your solution to make table work in a Bootstrap tab is correct.

See updated example for demonstration.

See jQuery DataTables: Column width issues with Bootstrap tabs for more information.

Upvotes: 2

Related Questions