jquery-datatables 销毁重新渲染

为什么要销毁重新渲染?

  1. 解决表格数据更换后数据不更新问题
  2. 解决列名更换后tbody中列的错位问题

渲染表格对象

<body>
    <div id="tableBox">
        <table class="dataTable table table-bordered " cellspacing="0" cellpadding="0"></table>
    </div>
</body>

<script>
    var Table = null;
    var option={
        data:data,
        columns:columns,
        ...
    }
    Table = $("#tableBox table").DataTable(option)
</script>

怎么样销毁表格对象?

这里存在一个误区:认为生成的只有一个存在变量中表格对象,将其销毁后就可以了。其实datatable生成的表格对象是有两部分构成:一为数据对象; 二为Dom对象

<script>

    //删除表格对象
    if(Table){
        Table.destroy();
        Table.clear();
        Table=null; 
        //删除dom中的标签片段
        $("#table").html("") 
        //重新加入table标签
        $("#table").append("<table class="dataTable table table-bordered " cellspacing="0" cellpadding="0"></table>"); 
    
    }

</script>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值