DataTable.js配置AJAX定时重载时表格总行数不变如何解决

首要问题修复：变量作用域错误 #

你代码中的table变量是在$(document).ready()回调内部声明的局部变量，外部的setInterval回调无法访问该变量，实际运行时控制台会报table is not defined错误，导致重载逻辑完全不生效，修复后代码参考如下：

$(document).ready(function() {
    var table = $('#table_id').DataTable( {
        "ajax": "http://192.168.1.134:8000/api/",
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "city" }
        ]
    });
    // 将定时器移入ready回调内，可正常访问table变量
    setInterval(function(){
        table.ajax.reload(null, false);
    },5000);
});

其他场景排查步骤 #

• 检查接口返回格式是否符合要求：DataTable默认要求ajax返回的结构中必须携带data字段存储行数据，格式为{"data": [{"id":1,"name":"xxx","city":"xxx"},...]}，如果接口返回结构不匹配，就算数据更新前端也不会渲染。
• 排查浏览器缓存问题：GET请求容易被浏览器缓存，导致每次拉取的都是历史数据，可以修改ajax配置禁用缓存，参考配置如下：

"ajax": {
    "url": "http://192.168.1.134:8000/api/",
    "type": "POST",
    "cache": false
}

• 打开浏览器开发者工具网络面板，确认每隔5秒是否正常发送接口请求：如果请求未发出，优先排查是否有其他JS报错阻塞了逻辑执行；如果请求已发出，确认返回的响应数据是否确实有更新，若数据未更新需要排查后端接口逻辑。
• 检查是否开启了服务端分页模式：如果初始化时配置了serverSide: true，需要确认接口返回的recordsTotal、recordsFiltered字段数值正确，否则也会出现总行数不变的问题。
• 检查初始化配置语法：原代码中columns最后一项的尾逗号、配置结束后多余的空行符号，部分低版本浏览器会解析为语法错误，导致DataTable初始化失败。

内容的提问来源于stack exchange，提问作者Papouche Guinslyzinho