本文探讨了在数据更改后，为何需要销毁并重新渲染表格，以确保数据更新及列名变动后的正确显示。通过具体代码示例，详细介绍了如何在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>
扫一扫
3396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
