Datatables表头错乱问题
前言:
之前在项目中用过无数次Datatables和Bootstrap,并且屡试不爽,但今天在将二者结合使用当第二个tab页面中的表格初始化时却遇到了令我头疼的问题:表头错乱的,而且好多样式都没应用上去。
之所以出现上述问题是因为控件初始化顺序导致,当datatable初始化的时候,父元素是隐藏的,获取不到它的尺寸,所以表头设置为默认大小100px;
解决方案:
解决方案有很多,我在此提供一个思路:我们可以在目标tab页面完全初始化完毕之后再去初始化表格。
因此,我们可以捕获Bootstrap中tab页面的相关显示事件,在显示前或者完全显示后做一些自己的操作。
案例如下:
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 获取已**的标签页的名称
var activeTab = $(e.target).text();
// 获取前一个**的标签页的名称
var previousTab = $(e.relatedTarget).text();
if(activeTab == "测试"){
//在此实现自己的业务...
initEstablisheTable(0);
}else{
initEstablishedTable(1);
}
});
})
附:
另外,对于datatable样式错乱问题,可以在表格初始化前通过JQuery动态改变表格样式,例如:
datatable表格初始化完毕后,改变其样式。