datatables 采用bootstrap的tab方式，表头会缩在一起，为什么？

[ssy341]

原因分析：
tab在没有显示之前，容器是没有高度宽度的，而dt在自动计算高度和宽度时是获取的外部容器的高度和宽度，当切换tab时，dt获取不到这个高度宽度，导致列头都挤在一起，是用下面代码解决此问题

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     //当切换tab时，强制重新计算列宽
     $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

以上代码来自：$.fn.dataTable.tables() 获取该页面上所有的DataTables实例

官方在线演示参考这里

补充

• 还有就是列和表头对不齐，也可以尝试用这个方法

[occultskyrong]

假设tab组有3个页面，难道不该是监听每个tab的click事件来进行tab页内容的draw么？
应该是当tab的click事件触发时，此tab中的ajax开始触发并将获得的data充入dom，此时有dt存在应该首次进行draw。
这样既不会第一次打开页面造成数据量过大而卡顿，也可以解决所谓的“表头缩在一起”。。。当然，第一个tab应该在document.ready的时候就进行draw。。

延时（事件触发）、异步（ajax局部刷新）加载，应该是一个web页基本的优化方案吧。。。。

[occultskyrong]

我看了这个官方的example，他这个数据是前端直接塞过来的array.txt。。
如果这个数据是后端ajax加载的话，这种页面两个tab同时进行ajax绝壁是有问题的，数据多了这个页面会有相当大的加载延迟。。。

根据我们项目的开发经验，数据统计系统中，包括echarts的绘制，必须是监听tab的click切换来进行加载，而不是页面document.ready时加载全部tab中所有的echarts或者dt的内容。

否则，用户要骂娘了。。。

[occultskyrong]

附赠Bootstrap中tab切换的监听，tabs-event。

注意show.bs.tab和shown.bs.tab的区别。。。

[occultskyrong]

stackoverflow找个一个佐证。。
http://stackoverflow.com/questions/8456974/how-to-use-ajax-loading-with-bootstrap-tabs

bootstrap2.x时代，就已经异步加载tabs内容了。。

[Smaillife]

我也在tab里面用过bootstrap，一楼的方法是正确的

[kelazzk123]

解决tab内表格错位的方法，亲测可用
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//当切换tab时，强制重新计算列宽
table.columns.adjust().draw();//table代表表格
} );

[xiager]

错位解决了 但是里面分页没有!!

[xiager]

怎么去解决

[occultskyrong]

@ladesjake 同学。。你怎么也得贴点代码吧？
重新开个帖子，把你遇到的问题和现在的技术代码贴一下。。。

[ssy341]

@ladesjake 不懂什么叫分页没有了，重新开issue讨论吧，记得贴上代码和问题描述，最好还带上截图

[LiuFu2014]

每次我的都会锁在一起，从新查下数据或手动更改浏览器长宽，就又好了，郁闷了啊