Skip to content
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
Closed

Comments

@ssy341
Copy link
Owner

@ssy341 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
Copy link
Collaborator

@occultskyrong 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
Copy link
Collaborator

@occultskyrong occultskyrong commented Jul 19, 2016

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

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

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

@occultskyrong
Copy link
Collaborator

@occultskyrong occultskyrong commented Jul 19, 2016

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

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

@occultskyrong
Copy link
Collaborator

@occultskyrong occultskyrong commented Jul 19, 2016

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

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

@Smaillife
Copy link
Collaborator

@Smaillife Smaillife commented Aug 9, 2016

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

@17854258991
Copy link

@17854258991 17854258991 commented Aug 11, 2016

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

@ladesjake
Copy link

@ladesjake ladesjake commented Apr 26, 2017

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

@ladesjake
Copy link

@ladesjake ladesjake commented Apr 26, 2017

怎么去解决

@occultskyrong
Copy link
Collaborator

@occultskyrong occultskyrong commented Apr 26, 2017

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

@ssy341
Copy link
Owner Author

@ssy341 ssy341 commented May 1, 2017

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

@LiuFu2014
Copy link

@LiuFu2014 LiuFu2014 commented May 6, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.