如何仅修改DataTable初始无数据提示而非搜索无结果提示？

嘿，这个需求完全可以实现！我之前也遇到过类似的情况，核心就是要区分初始无搜索和搜索后无结果这两种状态，分别设置对应的提示文本。下面给你两种实用的实现方式：

方法一：结合初始化回调+搜索事件动态修改提示 #

这种方法会在DataTable初始化完成后，以及每次用户执行搜索操作时，自动判断当前是否有搜索条件，然后切换对应的空提示文本：

// 初始化DataTable
const table = $('#your-table-id').DataTable({
  emptyMessage: "No search criteria has been provided", // 初始状态的提示
  initComplete: function() {
    // 初始化完成后，给列搜索框（如果有）绑定事件
    this.api().columns().every(function() {
      const column = this;
      $('input', this.footer()).on('keyup change clear', function() {
        updateEmptyPrompt(column.table());
      });
    });
  }
});

// 给全局搜索框绑定事件
$('#your-table-id_filter input').on('keyup change clear', function() {
  updateEmptyPrompt(table);
});

// 核心函数：根据搜索状态更新空提示
function updateEmptyPrompt(targetTable) {
  let hasActiveSearch = false;
  
  // 检查全局搜索框是否有内容
  if ($('#your-table-id_filter input').val().trim() !== '') {
    hasActiveSearch = true;
  }
  
  // 检查所有列搜索框是否有内容（如果启用了列搜索）
  targetTable.columns().every(function() {
    if (this.search().trim() !== '') {
      hasActiveSearch = true;
      return false; // 找到一个搜索条件就停止遍历
    }
  });

  const emptyMsgElement = targetTable.table().container().find('.dataTables_empty');
  if (targetTable.data().count() === 0) {
    // 当表格无数据时，根据搜索状态切换提示
    emptyMsgElement.text(hasActiveSearch ? "no records found" : "No search criteria has been provided");
  }
}

方法二：初始化后手动修改DOM+监听搜索事件 #

如果你的场景比较简单，也可以先把emptyMessage设为搜索无结果的文本，然后在初始化完成后手动修改初始状态的提示，再通过搜索事件动态切换：

const table = $('#your-table-id').DataTable({
  emptyMessage: "no records found" // 默认设为搜索无结果的提示
});

// 获取空提示的DOM元素
const emptyMsgElement = table.table().container().find('.dataTables_empty');

// 初始化完成后，检查是否是初始无搜索状态，修改提示
function checkAndUpdatePrompt() {
  let hasActiveSearch = false;
  // 检查全局搜索和列搜索
  hasActiveSearch = table.search().trim() !== '';
  if (!hasActiveSearch) {
    table.columns().every(function() {
      if (this.search().trim() !== '') {
        hasActiveSearch = true;
        return false;
      }
    });
  }

  if (table.data().count() === 0) {
    emptyMsgElement.text(hasActiveSearch ? "no records found" : "No search criteria has been provided");
  }
}

// 初始化后立即执行一次
checkAndUpdatePrompt();

// 监听搜索事件，每次搜索后更新提示
table.on('search.dt', function() {
  // 用setTimeout确保数据已经完成更新再判断
  setTimeout(checkAndUpdatePrompt, 10);
});

// 如果你的表格是异步加载数据，还要监听数据加载完成事件
table.on('xhr.dt', function() {
  checkAndUpdatePrompt();
});

注意事项 #

• 如果你的DataTable使用了异步加载数据（比如服务器端分页），一定要加上xhr.dt事件的监听，确保数据加载完成后提示文本能正确更新。
• 代码里的your-table-id需要替换成你实际的表格ID。

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