datatables 采用bootstrap的tab方式,表头会缩在一起,为什么? #9

Closed
ssy341 opened this Issue Jul 19, 2016 · 6 comments

Projects

None yet

4 participants

@ssy341
Owner
ssy341 commented Jul 19, 2016 edited

原因分析:
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
occultskyrong commented Jul 19, 2016 edited

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

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

@Smaillife
Collaborator

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

@17854258991

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

@ssy341 ssy341 closed this Oct 1, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment