table issue when using bootstrap tab with responsive extension

t0n1zz

so i adding responsive extension and put column control toggle in right side of my table and everything works fine as expected but when i put table into second or third tab in bootstrap tab, there is some issue like this

i already searching around the forum and get this js that said to be working/fixing this issue, but when i tried it, it works but only when first i opened the tab with table issue and then open another tab and back to the this tab with table issue

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

like in my example, first it will opened first tab which is fine, and then when i open second that it will shown like picture above and then when i open first again or third one and going back to the second tab then all will be fine.

maybe there is something i need to add into that code to fix it?

here is my complete code for drawing datatables

`
var table = $('#dataTables-example').DataTable({
dom: 'Bti',
scrollY: '70vh',
autoWidth: true,
scrollCollapse : true,
paging : false,
stateSave : false ,
select: {
style: 'os',
selector: 'td:not(:last-child)'
},
responsive:{
details:{
type: 'column',
target: -1
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: -1
}],
buttons: [
{
extend:'colvis',
text: '<i class="fa fa-table"></i>'
},
{
extend:'colvisGroup',
text: 'Semua',
show: ':hidden'
}
],
language: {
buttons : {},
select:{
rows:{
_: "",
0: "",
1: ""
}
},
"sProcessing": "Sedang proses...",
"sLengthMenu": "Tampilan MENU entri",
"sZeroRecords": "Tidak ditemukan data yang sesuai",
"sInfo": "Tampilan START sampai END dari TOTAL entri",
"sInfoEmpty": "Tampilan 0 hingga 0 dari 0 entri",
"sInfoFiltered": "(disaring dari MAX entri keseluruhan)",
"sInfoPostFix": "",
}
});

table.columns('.sort').order('asc').draw();

$('#searchtext').keyup(function(){
table.search($(this).val()).draw() ;
});
`