带垂直滚动条和Bootstrap Tabs控件
本示例演示带滚动条的 DataTables 如何与 Bootstrap Tabs 结合使用(或在任何类似的地方，table 元素在初始化时是隐藏的)
这里需要特别注意的是，浏览器在初始化时没有给 DataTables 可参考的值(如高度)，这会导致在启用滚动条时出现错位的情况
当 table 显示时，可以通过
columns.adjust() 方法来矫正错位
本示例演示如何使用 Bootstrap
shown.bs.tab 事件调用此方法，使用
$.fn.dataTable.tables() 运行
columns.adjust()
$('#DTExample a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$.fn.dataTable.tables({visible: true, api: true}).columns.adjust();
});
$('#DTExample table.dataTable').DataTable($.concatCpt('dataTable', {
ajax: '/data/examples/tables/data-tables/dt-ajax.json',
scrollY: 200,
scrollCollapse: true,
paging: false
});
// 将搜索应用于第二个表格
$('#myTable2')DataTable($.concatCpt('dataTable')).search('北京').draw();<div class="nav-tabs-horizontal" data-approve="nav-tabs">
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-table1" aria-controls="tab-table1" role="tab">表格1</a></li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-table2" aria-controls="tab-table2" role="tab">表格2</a></li>
</ul>
<div class="tab-content pt-20">
<div class="tab-pane active" id="tab-table1" role="tabpanel">
<table class="table table-bordered table-hover dataTable table-striped w-full text-nowrap"
id="myTable1">
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</thead>
<tfoot>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</tfoot>
</table>
</div>
<div class="tab-pane" id="tab-table2" role="tabpanel">
<table class="table table-bordered table-hover dataTable table-striped w-full text-nowrap"
id="myTable2">
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</thead>
<tfoot>
<tr>
<th>姓名</th>
<th>职位</th>
<th>工作地点</th>
<th>年龄</th>
<th>入职时间</th>
<th>年薪</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>