jQuery DataTable 处理提示无法显示问题求助

阿华AIGC实验室

2026-5-27

问题：jQuery DataTable 处理提示无法正常显示

我最近在折腾jQuery DataTable的时候碰到个头疼的问题——处理数据时的加载提示死活不显示。翻了各种方案试了个遍，大部分都没起效，只有一个方法能让提示勉强出来一部分。我目前写的代码是这样的：

var tblFacCert = $("#tblFacCert").on('processing.dt', function (e, settings, processing) { 
  if (processing) { 
    if ($('#imgLoad').length == 0) 
      $(this).prepend('<img id="imgLoad" src="../assets/images/PleaseWait.gif" alt="" />'); 
  } else 
    $('#imgLoad').remove(); 
}).DataTable({ 
  dom: 'lfrtip', 
  processing: true,
  // 其他DataTable配置项...
});

为啥你的手动提示不好使？

从代码来看，你是通过监听processing.dt事件手动插加载图，但这里可能有几个坑：

你把图片直接prepend到表格里，DataTable的DOM结构本身会动态生成和修改，很可能刚插进去就被覆盖了
其实DataTable本身就自带处理提示功能，没必要手动造轮子，反而容易出问题
自定义图片可能没加定位样式，要么被表格内容挡住，要么位置不对看不到

推荐两种解决方案

方案一：用DataTable原生的处理提示（最省心）

直接开启原生的processing配置，还能自定义提示内容换成你的加载图：

var tblFacCert = $("#tblFacCert").DataTable({ 
  dom: 'lfrtip', 
  processing: true, // 关键：必须开这个
  language: {
    // 把原生文字提示换成你的加载图片
    processing: '<img src="../assets/images/PleaseWait.gif" alt="加载中..." />'
  },
  // 其他配置项...
});

这个方法完全利用DataTable自带的机制，不用自己处理DOM事件，不容易出问题。

方案二：修复手动监听的写法

如果你非要自己实现，那得调整插入位置，把加载图放到DataTable的外层容器里，还要加定位确保它能显示在表格上方：

var tblFacCert = $("#tblFacCert").on('processing.dt', function (e, settings, processing) { 
  // 找到DataTable的外层容器，避免被表格DOM修改影响
  var tableWrapper = $(this).closest('.dataTables_wrapper');
  if (processing) { 
    if ($('#imgLoad').length === 0) {
      // 插入带定位的容器，确保加载图居中显示
      tableWrapper.append(`
        <div id="imgLoad" style="position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);display:flex;align-items:center;justify-content:center;">
          <img src="../assets/images/PleaseWait.gif" alt="加载中..." />
        </div>
      `);
    }
  } else {
    $('#imgLoad').remove();
  }
}).DataTable({ 
  dom: 'lfrtip', 
  processing: false, // 关掉原生提示避免冲突
  // 其他配置项...
});

这里给加载图加了半透明背景和居中样式，既能挡住表格内容，又能让用户看到加载状态。