datatable插件应用于tab切换出现表头错位问题
来源:互联网 发布:将icloud照片导入mac 编辑:程序博客网 时间:2024/06/06 17:09
场景描述:有一个tab切换,共两个页面,每个页面里都有一个table,并且采用了datatable插件。
问题:有一个table在初始化的时候,头部布局混乱。如图:
原因所在:tab切换前,有一个页面的display是none,发现只要原来是block的都没有问题,只要是none就有问题。检查元素发现,datatable有一个div(类名为dataTables_scrollHeadInner)的width为100px,显然是默认值,其获取父元素的宽度失败。none导致的datatable无法成功获取父元素的具体数值,所以导致了布局混乱。
解决方案:
一:datatable绑定事件,发生在tab切换事件之后,即确保能成功获取父元素的width值(测试没有成功,感觉工程代码太复杂,后面有时间再深究)
二:比较傻逼,就是两个页面的div都设为block(这时,其实在页面上会将两个页面直接显示),然后js进行datatable的绑定。绑定结束之后,再将需要隐藏的页面隐藏。这样在用户的眼里,还是只有一个页面显示了,只是实际上是我们将其中一个页面先显示然后隐藏了。
三:正确方法出现了。
在tab切换时,即隐藏的页面重新显示时加上如下一段代码就可以了。
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
问题出现的原因也被我研究出来了(其实是在github上看了大神的讨论):
tab在没有显示之前,容器是没有高度宽度的,而dt在自动计算高度和宽度时是获取的外部容器的高度和宽度,当切换tab时,dt获取不到这个高度宽度,导致列头都挤在一起。
- datatable插件应用于tab切换出现表头错位问题
- jquery datatable设置垂直滚动后,表头(th)错位问题
- extjs2.2使用多表头插件两层表头对不齐错位的问题
- tab切换延时问题。
- chrome插件开发之:处理由于注入css导致页面的ui出现错位的问题
- [easyui]复合表头隐藏列时表头出现错位的修复
- 理解插件,Tab切换插件形式。
- tab选项卡切换问题
- dataTable 表格头错位
- 网页中tab页切换小插件
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
- tab切换fragment时,会出现滑动viewpager卡顿迟缓问题
- Vue Tab(component 元素)实现组件间的切换及其出现的问题
- Android RadioGroup做tab页卡切换时 内部RadioButton错位
- Jquery tab插件wdScrollTab 在chrome中出现不兼容的问题
- Jquery tab插件wdScrollTab 在chrome中出现不兼容的问题
- datatable表头增加分页
- Tab的切换问题:Tab的显示和隐藏
- @Autowired与@Resource的区别
- IE报vuex requires a Promise polyfill in this browser问题解决
- windows64位环境下安装pymssql模块
- 使用jquery.qrcode生成二维码
- android wifi开发(二)
- datatable插件应用于tab切换出现表头错位问题
- windows下Mysql批量备份多个表
- 1065. 单身狗(25) PAT
- MD5加密解密代码
- 定位内核模块crash的方法
- mongo教程-批量操作命令篇
- HTML5
- (function(){...})() 与 (function(){...}())
- 2017“未来已来”全球人工智能高峰论坛报名时间