DataTable在Bootstrap Tab选项卡中表头缩在一起的问题解决

来源:互联网 发布:源码平台 编辑:程序博客网 时间:2024/06/14 05:12

                          最近公司做项目的时候遇到这样一个问题,就是在Bootstrap选项卡中使用Data Table的时候,样式什么的都正确,但是表头错位,找了半天才找到原因,分享给大家解决方案。

                           原因是这样的,在选项卡中使用DataTables的时候,要首先判断当前选项卡是否显示,要在显示之后再进行DataTables的初始化,否则DataTables会找不到对应的宽高,从而造成表头缩在一起的样式。废话不多说,上代码:

           如上图,我的解决方案是给Tab加一个click监听事件,判断当点击了相应有DataTables的选项卡时,先让这个选项卡显示,然后判断DataTables是否初始化,没有则进行初始化操作,否则自适应一下表格。这里有一个更好的方法就是使用Bootstrap Tab的shown事件,大家可以自己探索下!

2 0
原创粉丝点击