ASP.NET Core MVC中AJAX动态表格添加分页及DataTable二次加载失效解决

问题原因 #

DataTable首次初始化后会在当前表格DOM上绑定实例，第二次直接重复调用初始化方法时，DataTable会检测到已有实例存在，不会执行重新初始化逻辑，因此新填充的表格数据不会被分页处理，直接全部展示。

解决方案 #

无需大幅修改现有逻辑，只需要在每次初始化DataTable前，先销毁已存在的实例即可，修改AJAX success回调中初始化表格的代码：

// ... 原有拼接thead、tbody的代码保持不变
// 新增判断：先销毁已存在的DataTable实例
if ($.fn.DataTable.isDataTable('#tblViewPartDetails')) {
    // destroy参数为true表示将表格恢复到初始化前的原生状态，清空DataTable生成的分页、搜索等附加元素
    $('#tblViewPartDetails').DataTable().destroy(true);
}
// 再重新初始化DataTable，可自定义配置
$('#tblViewPartDetails').DataTable({
    paging: true, // 开启分页
    pageLength: 10, // 每页默认显示条数
    searching: false, // 按需开启/关闭搜索功能
    ordering: false // 按需开启/关闭排序功能
});
$("#divGridSales").css({ display: "block" });
// ... 后续原有代码保持不变

额外注意事项 #

• 你当前循环生成的查看链接id均为hlinkView，id重复会导致DOM选择异常，建议删除id属性，仅保留class即可。
• 如果后续数据量超过千条，建议更换为DataTable的服务端分页模式，避免一次性加载所有数据造成页面卡顿。

内容的提问来源于stack exchange，提问作者M Taj