New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
6 participants
@ssy341
Owner

ssy341 commented Jul 19, 2016

原因分析:
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

This comment has been minimized.

Show comment
Hide comment
@occultskyrong

occultskyrong Jul 19, 2016

Collaborator

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

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

Collaborator

occultskyrong commented Jul 19, 2016

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

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

@occultskyrong

This comment has been minimized.

Show comment
Hide comment
@occultskyrong

occultskyrong Jul 19, 2016

Collaborator

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

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

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

Collaborator

occultskyrong commented Jul 19, 2016

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

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

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

@occultskyrong

This comment has been minimized.

Show comment
Hide comment
@occultskyrong

occultskyrong Jul 19, 2016

Collaborator

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

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

Collaborator

occultskyrong commented Jul 19, 2016

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

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

@occultskyrong

This comment has been minimized.

Show comment
Hide comment
@occultskyrong

occultskyrong Jul 19, 2016

Collaborator

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

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

Collaborator

occultskyrong commented Jul 19, 2016

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

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

@Smaillife

This comment has been minimized.

Show comment
Hide comment
@Smaillife

Smaillife Aug 9, 2016

Collaborator

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

Collaborator

Smaillife commented Aug 9, 2016

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

@17854258991

This comment has been minimized.

Show comment
Hide comment
@17854258991

17854258991 Aug 11, 2016

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

17854258991 commented Aug 11, 2016

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

@ladesjake

This comment has been minimized.

Show comment
Hide comment
@ladesjake

ladesjake Apr 26, 2017

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

ladesjake commented Apr 26, 2017

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

@ladesjake

This comment has been minimized.

Show comment
Hide comment
@ladesjake

ladesjake Apr 26, 2017

怎么去解决

ladesjake commented Apr 26, 2017

怎么去解决

@occultskyrong

This comment has been minimized.

Show comment
Hide comment
@occultskyrong

occultskyrong Apr 26, 2017

Collaborator

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

Collaborator

occultskyrong commented Apr 26, 2017

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

@ssy341

This comment has been minimized.

Show comment
Hide comment
@ssy341

ssy341 May 1, 2017

Owner

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

Owner

ssy341 commented May 1, 2017

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

@LiuFu2014

This comment has been minimized.

Show comment
Hide comment
@LiuFu2014

LiuFu2014 May 6, 2017

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

LiuFu2014 commented May 6, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment