jquery-datatables 销毁重新渲染

最新推荐文章于 2026-05-12 05:43:21 发布

转载最新推荐文章于 2026-05-12 05:43:21 发布 · 5.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://segmentfault.com/a/1190000017775697

收录于

当前文章被以下社区和专栏收录：

本文探讨了在数据更改后，为何需要销毁并重新渲染表格，以确保数据更新及列名变动后的正确显示。通过具体代码示例，详细介绍了如何在JavaScript中实现这一过程。

为什么要销毁重新渲染？

解决表格数据更换后数据不更新问题
解决列名更换后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>

标签

#javascript #大数据 #python #ViewUI