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

 

 

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值