DataTables表格自定义列搜索无法跨页，请求技术解决方案

你遇到的问题根源很明确：自己写的filterTable函数直接操作DOM里的表格行，但DataTables为了性能，只会把当前页的行保留在DOM中，其他页的行都存在内存里，所以你的搜索只能搜到当前页内容。

正确的做法是用DataTables原生的列搜索API，它会基于整个数据集过滤，自然支持跨页搜索。以下是完整的实现方案：

步骤1：调整HTML结构 #

给表格添加唯一ID，方便DataTables初始化：

<!-- 搜索框 -->
<input type="text" placeholder="Enter First Name" name="fname" id="fname">
<input type="text" placeholder="Enter Middle Name" name="mname" id="mname">
<input type="text" placeholder="Enter Last Name" name="lname" id="lname">

<!-- 表格 -->
<table id="myTable" class="display">
  <!-- 表头和表体内容 -->
  <thead>
    <tr>
      <th>First Name</th>
      <th>Middle Name</th>
      <th>Last Name</th>
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
  </tbody>
</table>

步骤2：用DataTables API实现列搜索 #

替换你原来的filterTable函数，改用DataTables的原生API：

// 初始化DataTables实例，保存到变量
var table = $('#myTable').DataTable({
  // 你的DataTables配置项，比如分页、排序等
  paging: true,
  ordering: true,
  searching: true // 可以保留全局搜索，也可以设为false只保留列搜索
});

// 给每个搜索框绑定keyup事件
$('#fname').on('keyup', function() {
  // 第0列（First Name），注意DataTables列索引从0开始
  table.column(0).search(this.value).draw();
});

$('#mname').on('keyup', function() {
  // 第1列（Middle Name）
  table.column(1).search(this.value).draw();
});

$('#lname').on('keyup', function() {
  // 第2列（Last Name）
  table.column(2).search(this.value).draw();
});

关键说明 #

• table.column(index).search(value)：指定某一列的搜索关键词，DataTables会在整个数据集中匹配，不是只当前页
• .draw()：触发表格重新渲染，展示过滤后的结果，自动切换到包含匹配数据的页面
• 列索引从0开始，所以原来的第1列对应这里的0，以此类推

这样实现的列搜索就能跨页检索所有数据，完全符合你的需求。

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