数据表在引导选项卡中的大小不正确

我有一个页面，每个选项卡中有三个引导选项卡和一个数据表。 第一个选项卡中的数据表工作正常。 但是，第二个选项卡中的数据表是半宽，我不知道为什么。 也没有css适用于它。

这是第一个标签的截图（工作正常）

第二个标签（半宽数据）

我的代码：

$('#companies').DataTable({ //table in tab 1 (works fine) responsive: true }); $('#companies2').DataTable({ //table in tab 2 responsive: true }); 

我的HTML：

  
 
 
 
Tabs
 
 
Section 1
 
Section 2
 
Section 3
 
  
 
  {{#each context}} {{#if setup}}  {{#if is_approved}}  {{else}}  {{/if}}  {{/if}} {{/each}} 
 
 
 
Company ID
 
Company Name
 
Status
 
 
 
 
 
 
{{company_id}}
 
{{company_name}}
Approved
Not Approved
View Orders
 
View Details
 
 
 
 
  {{#each context}} {{#unless setup}}  {{/unless}} {{/each}} 
 
 
 
Company ID
 
Company Name
 
Create Date
 
 
 
 
 
 
{{company_id}}
 
{{company_name}}
 
{{created_at}}
 
Setup
 
Ignore
 
 
 
 
 3rd 
  

有人可以帮忙吗？

Answer 1

保留dataTable实例，即

 var companies2 = $('#companies2').DataTable({ responsive: true }) 

然后使用columns.adjust()重新计算保持表格的选项卡变为宽度时的宽度：

 $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { if (e.target.hash == '#tab2') { companies2.columns.adjust().draw() } }) 

完全没有经过您的特定场景测试，但这肯定是要走的路。

Answer 2

解

当表变为可见时，使用columns.adjust()和responsive.recalc()重新计算列宽。

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

DEMO

https://jsfiddle.net/gyrocode/Ltga3n4u/

链接

请参阅jQuery DataTables – Bootstrap选项卡的列宽问题，以解决jQuery DataTables和Bootstrap选项卡最常见的问题。

Answer 3

在为DataTables使用Responsive附加组件时，您还应该调用responsive.recalc（），同时：

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

这是一个古老的问题，但也许有人会帮助这些额外的信息。