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

Question

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

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

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

   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){ $($.fn.dataTable.tables(true)).DataTable() .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

在您的fnInfoCallback function 中致电Resize 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/

Answer 2

添加

style="overflow-x:auto;" 

到<table> 表格标签它将变得响应。