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表格初始化完毕后，改变其样式。