响应式jQuery数据表在选项卡和引导程序模式弹出窗口中不起作用

Question

我在我的项目中使用了响应式jquery数据表， 我在选项卡和弹出窗口中遇到问题 问题列表

1. 响应式jquery数据表在选项卡中不起作用，仅在第一个选项卡上工作而不在第二个选项卡上（加上符号不在jquery数据表中）。

2. Bootstrap模式窗口也响应jquery数据表不工作（加上符号不在jquery数据表中）。 请帮我解决这个问题 我试过下面的代码，但这对我没有帮助。

   $（＆＃39; a [data-toggle =＆＃34; tab＆＃34;]＆＃39;）。on（＆＃39; shown.bs.tab＆＃39;，function（e）{        $（$。fn.dataTable.tables（真））。数据表（）        .columns.adjust（）        .responsive.recalc（）;    }）;

   https://jsfiddle.net/97sos7dm/31/

   <div class="tabpanel-primary">
   <div class="tabpanel-heading">
       <ul class="nav nav-tabs custab" role="tablist">
           <li role="presentation" class="active"><a href="#invoice" aria-controls="home" role="tab" data-toggle="tab">Invoice</a></li>
           <li role="presentation"><a href="#payee" aria-controls="profile" role="tab" data-toggle="tab">Payee</a></li>
   
       </ul>
       </div>
      <div class="tab-content">
       <div role="tabpanel" class="tab-pane active" id="invoice">
   
       <div class="row margin-0 datatab">
       </div>
     </div>
    <div role="tabpanel" class="tab-pane" id="payee">
   <div class="row margin-0">
   </div>
   

    

请参阅以上js小提琴链接中的问题

Answer 1

添加

style="overflow-x:auto;" 

到<table>表格标签，它会变得敏感。

Answer 2

在您的Resize function中致电fnInfoCallback function

"fnInfoCallback": function (oSettings,
   $(".table").resize() 
},

其他期权变更请求Event Tab和Modal

$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
   $(".table").resize()
    } ); 
$('#arPayeeItem').on('shown.bs.modal', function () {
 $(".table").resize()
})

https://jsfiddle.net/97sos7dm/54/