DataTable延迟加载场景下如何动态传递deferLoading参数

deferLoading 是仅DataTable初始化阶段生效的配置项，初始化完成后直接修改实例的该属性不会触发配置更新，这是你修改不生效的核心原因。针对你的场景（首屏数据已预渲染到HTML中，需要动态传入总记录数开启延迟加载），正确实现方案如下：

实现步骤 #

1. 调整初始化时序，先拿总记录数再初始化DataTable #

首屏数据加载、总记录数获取完成后再执行DataTable初始化，将动态拿到的总记录数作为deferLoading的参数传入，代码示例：

function loadInitialData(){
    // 你的首屏ajax请求逻辑
    $.ajax({
        url: "你的首屏数据接口地址",
        success: function(res) {
            // 先完成首屏数据渲染到table tbody的逻辑
            renderFirstPageData(res.list);
            // 从接口返回值中取总记录数
            const totalRecords = res.total;
            // 再初始化DataTable
            window.table = $('#example').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "scripts/server_processing.php",
                "deferLoading": totalRecords, // 动态传入总记录数
                // 其他你需要的配置项，比如分页长度、列定义等
            });
        }
    })
}

$(document).ready(function() {
    loadInitialData();
});

该方案下DataTable会直接复用已经渲染在DOM中的首屏数据，不会主动触发第一页的ajax请求，完全符合延迟加载的需求。

2. 修正分页计算错误问题 #

你出现分页计算错误的原因有两点：

• 初始化时deferLoading传值不正确，DataTable默认读取的总记录数和实际业务总记录数不符
• 服务端分页接口返回格式不符合DataTable要求：服务端模式下接口不能仅返回行数据数组，必须返回包含总记录数的标准结构，示例如下：

{
    "draw": 1,
    "recordsTotal": 100, // 业务总记录数，和初始化时传入的deferLoading值一致
    "recordsFiltered": 100, // 过滤后的总记录数，无过滤逻辑时和recordsTotal一致
    "data": [
        [0,'2021072701587','08:04:57'],
        [1,'2021072701585','08:03:46'],
        [2,'2021072701585','08:02:44']
    ]
}

按照上述要求调整接口返回格式后，分页计算逻辑即可恢复正常。

特殊场景：初始化后需要更新总记录数 #

如果确实存在DataTable初始化后需要动态修改总记录数的需求，可以通过官方API更新：

const pageInfo = table.page.info();
pageInfo.recordsTotal = 新的总记录数;
pageInfo.recordsFiltered = 新的过滤后总记录数;
table.draw(false); // false表示保留当前分页状态重绘，不会跳转回第一页

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