引导表选项卡中的数据表大小不正确 [英] Datatables improperly sized in bootstrap tab
问题描述
我有一个页面,该页面包含三个引导程序选项卡,每个选项卡中都有一个数据表.第一个选项卡中的数据表工作正常.但是,第二个选项卡中的数据表为半角,我不知道为什么.也没有应用CSS.
I have a page that has three bootstrap tabs and a datatable in each tab. The datatable in the first tab works fine. However, the datatable in the second tab is at half-width and I have no idea why. There's no css applied to it either.
这是第一个标签页的屏幕截图(工作正常)
Here's a screenshot of the first tab (works fine)
和第二个标签(数据表的半角宽度)
And the 2nd tab (datatable at half width)
我的代码:
$('#companies').DataTable({ //table in tab 1 (works fine)
responsive: true
});
$('#companies2').DataTable({ //table in tab 2
responsive: true
});
我的html:
<!-- tab start -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Tabs</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>
<!-- tab sections -->
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<table id="companies" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
<thead>
<tr>
<th>Company ID</th>
<th>Company Name</th>
<th>Status</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{{#each context}}
{{#if setup}}
<tr>
<td>{{company_id}}</td>
<td>{{company_name}}</td>
{{#if is_approved}}
<td>Approved</td>
{{else}}
<td>Not Approved</td>
{{/if}}
<td><a href="/admin/viewclientorders/{{company_id}}">View Orders</a></td>
<td><a href="/admin/company/{{company_id}}">View Details</a></td>
</tr>
{{/if}}
{{/each}}
</tbody>
</table>
</div>
<div class="tab-pane" id="tab2">
<table id="companies2" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
<thead>
<tr>
<th>Company ID</th>
<th>Company Name</th>
<th>Create Date</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{{#each context}}
{{#unless setup}}
<tr>
<td>{{company_id}}</td>
<td>{{company_name}}</td>
<td>{{created_at}}</td>
<td><button class="btn btn-primary setup"><a href="/admin/companies/setup_company/{{company_id}}">Setup</a></button></td>
<td><button class="btn btn-danger delete">Ignore</button></td>
</tr>
{{/unless}}
{{/each}}
</tbody>
</table>
</div>
<div class="tab-pane" id="tab3">
3rd
</div>
</div>
有人可以帮忙吗?
推荐答案
保留dataTable实例,即
Keep the dataTable instances, i.e.
var companies2 = $('#companies2').DataTable({
responsive: true
})
然后使用 columns.adjust()
重新计算包含表格的标签页可见时的宽度:
Then use columns.adjust()
to recalculate the widths when the tab holding the table becomes visible :
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
if (e.target.hash == '#tab2') {
companies2.columns.adjust().draw()
}
})
完全未针对您的特定情况进行测试,但这当然是要走的路.
Completely untested with your specific scenario, but this is certainly the way to go.
这篇关于引导表选项卡中的数据表大小不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!