Datatables：如何将列搜索框移到表格外并保留列级搜索功能

没问题，要实现列级别的外部搜索其实很简单，只需要把全局的search()方法换成针对指定列的column().search()方法即可。以下是完整的实现步骤和代码示例：

1. 添加外部搜索输入框 #

在表格上方或合适位置，为每一列创建单独的搜索输入框，建议用data-column属性标记对应的列索引（从0开始计数）：

<!-- 外部搜索区域 -->
<div class="column-search-bar">
  <input type="text" placeholder="搜索姓名" data-column="0">
  <input type="text" placeholder="搜索职位" data-column="1">
  <input type="text" placeholder="搜索部门" data-column="2">
  <!-- 根据你的表格列数，继续添加对应输入框 -->
</div>

<!-- 你的DataTables表格 -->
<table id="example" class="display" style="width:100%">
  <!-- 表格内容省略 -->
</table>

2. 编写JavaScript逻辑 #

初始化DataTable后，为每个输入框绑定keyup事件，针对指定列执行搜索：

// 初始化DataTable
var table = $('#example').DataTable();

// 为每个列搜索输入框绑定事件
$('.column-search-bar input').on('keyup', function() {
  // 获取当前输入框对应的列索引
  var columnIndex = $(this).data('column');
  // 获取输入的搜索值（去除首尾空格）
  var searchValue = $(this).val().trim();
  
  // 对指定列执行搜索并重新绘制表格
  table.column(columnIndex)
      .search(searchValue)
      .draw();
});

额外优化（可选） #

如果你需要精确匹配、正则搜索等高级功能，可以调整search()方法的参数：

• 精确匹配：table.column(columnIndex).search(searchValue, true, false).draw()
• 启用正则搜索：table.column(columnIndex).search(searchValue, true, true).draw()
• 关闭大小写不敏感：table.column(columnIndex).search(searchValue, false, false, false).draw()

这样修改后，每个外部输入框只会对对应的列进行搜索，完全保留你原来的列级搜索功能，只是把搜索框移到了表格外部。

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