如何实现DataTables的processing提示消息延迟显示功能

实现方案 #

第一步：调整基础配置 #

先把原生自动触发的processing功能关闭，改为后续手动控制，修改配置如下：

"processing": false, // 关闭原生自动显示逻辑，改为手动控制
"serverSide": true, // 保留原有服务端处理模式

第二步：绑定请求事件实现延迟逻辑 #

借助DataTables内置的preXhr（请求发起前触发）和xhr（请求完成后触发）事件，配合定时器实现延迟显示逻辑，完整示例代码如下：

// 全局存储定时器ID，避免重复触发
let processingTimer = null;
const dataTable = $('#你的表格ID选择器').DataTable({
  // 你的其他原有配置项
  processing: false,
  serverSide: true,
  // 请求发起前触发
  preXhr: function () {
    // 设置延迟显示定时器，1500为延迟毫秒数，可按需改为1000/2000对应1/2秒
    processingTimer = setTimeout(() => {
      // 手动唤起processing提示
      dataTable.processing(true);
    }, 1500);
  },
  // 请求完成后触发
  xhr: function () {
    // 先清除定时器，若请求耗时小于延迟时间则不会触发提示
    clearTimeout(processingTimer);
    // 手动关闭processing提示
    dataTable.processing(false);
  }
});

说明 #

• 如果需要调整延迟阈值，直接修改定时器里的毫秒数值即可，1000对应1秒，2000对应2秒
• 该逻辑对所有表格请求生效，包括手动调用ajax.reload()刷新的场景，无需额外适配

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