添加AJAX无刷新加载后JQuery DataTable分页失效求助

你现在的问题出在AJAX刷新的方式上：

• 页面初始化时，$('#data-table').DataTable()已经把表格转换成DataTable组件，生成了分页、排序等额外DOM元素并绑定了事件。
• 但你用$('#data-table').load(' #data-table')时，直接把整个表格（包括DataTable生成的控件）替换成了新的原始表格结构。新替换的表格没有被重新初始化DataTable，自然就失去了分页功能。
• 这种写法还会导致页面出现重复的#data-table元素（加载页面里的#data-table来替换当前的#data-table），本身就属于DOM结构问题。

推荐两种靠谱的修复方式：

方式一：只刷新表格tbody内容（更高效） #

这种方式保留thead和DataTable生成的控件，只更新数据部分：

var delay = 5000; // 建议拉长刷新间隔，减少服务器压力
var table = $('#data-table').DataTable(); // 提前保存表格实例
var refreshId = setInterval(function () {
    // 加载目标页面的tbody内容，替换当前表格的tbody
    $('#data-table tbody').load(' #data-table tbody', function() {
        // 加载完成后刷新DataTable的数据
        table.draw();
    });
}, delay);

方式二：重新初始化DataTable（适合必须替换整个表格的场景） #

如果必须替换整个表格，要先销毁旧的DataTable实例，再重新初始化：

var delay = 5000;
var refreshId = setInterval(function () {
    $('#data-table').load(' #data-table', function() {
        // 销毁已存在的DataTable实例，避免冲突
        if ($.fn.DataTable.isDataTable('#data-table')) {
            $('#data-table').DataTable().destroy();
        }
        // 重新初始化DataTable
        $('#data-table').DataTable();
    });
}, delay);

注意：这种方式每次刷新都会销毁重建，性能不如方式一，且会让分页回到第一页，体验稍差。

额外优化建议 #

更推荐用DataTable官方的异步加载方案，自己写load容易出问题：

var table = $('#data-table').DataTable({
    ajax: '/api/get-bg-records', // 后端专门返回表格数据的接口
    columns: [
        { data: 'id' },
        { data: 'lp' },
        { data: 'status', render: function(data) { return data == 1 ? 'PASS' : 'FAILED'; } },
        { data: 'timestamp', render: function(data) { return new Date(data).toLocaleTimeString(); } },
        { data: 'timestamp', render: function(data) { return new Date(data).toLocaleDateString(); } }
    ],
    // 配置自动刷新
    fnDrawCallback: function() {
        setTimeout(function() {
            table.ajax.reload();
        }, 5000);
    }
});

这种方式不需要自己写定时器，DataTable会自动处理数据加载、分页和刷新，稳定性更高。

内容的提问来源于stack exchange，提问作者lil poggers