DataTables搜索行为修改遇阻：需高亮匹配行而非移除未匹配行

嘿，我懂你想要的效果——搜索时所有行都留在表格里，只把含关键词的内容高亮出来，而不是默认把不匹配的行直接隐藏。之前改_fnDraw和fnDisplayEnd的思路其实绕远了，而且动DataTables核心源码很容易出问题，比如版本升级后代码直接失效，还可能搞乱分页、排序这些原有功能。我给你个更稳妥的方案，完全不用碰核心代码：

核心思路 #

我们要做的就是禁用DataTables默认的搜索过滤行为，但保留搜索框，然后手动监听搜索框的输入事件，用mark.js直接在所有行里高亮匹配关键词，彻底绕过DataTables的过滤逻辑。

具体实现步骤 #

1. 初始化DataTables时调整配置

先保留搜索框，但覆盖默认的搜索处理逻辑：

var table = $('#your-table-id').DataTable({
  searching: true, // 保留顶部的搜索框
  initComplete: function() {
    var tableApi = this.api();
    var searchInput = $('.dataTables_filter input');

    // 移除DataTables默认绑定的搜索事件，避免它自动过滤行
    searchInput.off('.DT');

    // 绑定我们自己的搜索处理事件
    searchInput.on('keyup input paste', function() {
      var searchTerm = $(this).val().trim();

      // 第一步：清除之前所有的高亮标记
      tableApi.rows().every(function() {
        $(this.node()).find('.highlight').removeClass('highlight');
      });

      // 第二步：如果有搜索词，遍历所有行进行高亮
      if (searchTerm) {
        tableApi.rows().every(function() {
          var rowElement = $(this.node());
          // 用mark.js高亮匹配内容，自定义样式类名
          rowElement.mark(searchTerm, {
            className: 'highlight',
            element: 'span'
          });
        });
      }
    });
  }
});

2. 添加高亮样式

在CSS里给高亮内容加个显眼的样式：

.highlight {
  background-color: #ffeb3b;
  font-weight: 600;
}

3. 适配datatables.mark.js（如果已使用该插件）

如果你已经引入了datatables.mark.js，它默认是在DataTables的draw.dt事件触发时高亮过滤后的行，我们需要先解绑这个默认事件，再用上面的逻辑：

// 解绑插件默认的draw事件绑定
$(document).off('draw.dt.datatables.mark');

为什么不推荐修改核心函数？ #

_fnDraw和fnDisplayEnd都是DataTables内部的核心函数，负责表格绘制和显示范围控制，修改它们会打破原有逻辑，比如分页时行不显示、排序异常等问题，而且DataTables版本更新后，这些内部函数的结构可能变动，你的修改直接失效，维护成本极高。

用上面的方法，完全基于DataTables公开API和mark.js基础功能，既稳定又易维护，完美实现“只高亮、不移除行”的效果。

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