datatable动态绑定前先销毁原信息和配置

最新推荐文章于 2023-07-23 14:40:17 发布

二苟

最新推荐文章于 2023-07-23 14:40:17 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： DataTable

本文链接：https://blog.youkuaiyun.com/aleefang/article/details/103539571

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了解决在异步查询数据并使用Datatable进行排序和分页时出现的旧数据残留问题。通过先销毁再重新初始化Datatable，确保数据正确更新。适用于需要频繁更新数据的动态表格场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前因为需要异步查询数据，然后对现有数据进行排序和分页等功能。第一次的时候，在页面中加载数据后再对table进行DataTable渲染处理，然后发现在重新请求数据后，如果对数据进行排序，出现的时之前的旧数据；说明重新使用datatable对table初始化，并没有起效。

因此，如果时二次绑定的话，需要对table先进行一个数据销毁再重新进行渲染。

方法：

var datatable = $("#dataTable").dataTable();
    if (datatable) {  
    datatable.fnClearTable();  //清空数据
    datatable.fnDestroy();  //销毁datatable
} 
//将数据重新写入table容器
...js代码

//重新进行datatable渲染，可以根据需求配置
...js代码

例如，我的table只需要进行排序功能，则配置如下：

//initDataTableForOrder("#dataTable");
function initDataTableForOrder(tableId) {
    $(tableId).DataTable({
	"paging" : false,
	"info" : false,
	"searching" : false,
	"ordering" : true,
	"order": [],
	"autoWidth" : true,
	"scrollCollapse": true,			
	"scrollX": true,
	"scrollXInner": "100%",
        "retrieve": true
    });
}