datatable在tab切换出现表头错位问题

Posted 2020-12-29 jiang_mingyi

场景描述：有一个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获取不到这个高度宽度，导致列头都挤在一起。
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();$.fn.dataTable.tables( {visible: true, api: true}获取当前页面所有可见的table（vislible为false时是全部的），..columns.adjust()然后在强制计算宽度。