如何使用复选框实现DataTables单列搜索功能？

核心思路 #

通过监听复选框选中状态，维护目标搜索列的索引数组，重写搜索逻辑，仅在选中列中匹配关键词，控制表格行的显示/隐藏。

具体实现步骤 #

• 给列复选框添加自定义属性data-column-index，对应表格列的索引（从0开始计数），方便关联列与复选框。
• 初始化DataTables实例并保存为变量，便于后续操作表格数据。
• 监听复选框的change事件，实时更新选中列索引数组，并触发搜索动作。
• 监听搜索框输入事件，自定义过滤逻辑：遍历表格行，仅检查选中列的单元格值是否包含搜索关键词，匹配则保留该行。

代码示例 #

HTML 结构

<!-- 列选择复选框 -->
<div class="column-filters">
  <label><input type="checkbox" data-column-index="0" checked> Name</label>
  <label><input type="checkbox" data-column-index="1" checked> Position</label>
  <label><input type="checkbox" data-column-index="2" checked> Office</label>
</div>

<!-- 自定义搜索框 -->
<input type="text" id="custom-search" placeholder="输入关键词搜索...">

<!-- DataTables 表格 -->
<table id="example" class="display" style="width:100%"></table>

JavaScript 逻辑

// 初始化 DataTables，替换为你的数据源和列配置
const table = $('#example').DataTable({
  data: [
    { name: "Tiger Nixon", position: "System Architect", office: "Edinburgh" },
    { name: "Garrett Winters", position: "Accountant", office: "Tokyo" },
    { name: "Ashton Cox", position: "Junior Technical Author", office: "San Francisco" }
    // 更多数据...
  ],
  columns: [
    { title: 'Name', data: 'name' },
    { title: 'Position', data: 'position' },
    { title: 'Office', data: 'office' }
  ]
});

// 保存当前选中的列索引，默认全选
let selectedColumns = [0, 1, 2];

// 监听复选框状态变化
$('input[type="checkbox"][data-column-index]').on('change', function() {
  const colIndex = parseInt($(this).data('column-index'));
  if ($(this).is(':checked')) {
    // 勾选时添加索引（避免重复）
    if (!selectedColumns.includes(colIndex)) {
      selectedColumns.push(colIndex);
    }
  } else {
    // 取消勾选时移除索引
    selectedColumns = selectedColumns.filter(index => index !== colIndex);
  }
  // 触发搜索更新结果
  $('#custom-search').keyup();
});

// 自定义搜索逻辑
$('#custom-search').on('keyup', function() {
  const searchTerm = $(this).val().toLowerCase().trim();
  
  // 清除 DataTables 默认搜索
  table.search('').draw();
  
  // 搜索词为空时显示全部数据
  if (searchTerm === '') {
    table.draw();
    return;
  }
  
  // 遍历所有行，判断是否匹配选中列的搜索条件
  table.rows().every(function() {
    const rowData = this.data();
    let isMatch = false;
    
    // 检查每一个选中列的单元格值
    selectedColumns.forEach(colIndex => {
      // 根据列索引获取对应的数据字段名，适配你的列配置
      const fieldName = table.columns(colIndex).dataSrc()[0];
      const cellValue = rowData[fieldName].toLowerCase();
      if (cellValue.includes(searchTerm)) {
        isMatch = true;
      }
    });
    
    // 控制行的显示/隐藏
    this.visible(isMatch);
  });
  
  // 更新表格显示
  table.draw();
});

注意事项 #

• 如果你的列配置未使用data字段，可直接通过this.cell(rowIndex, colIndex).data()获取单元格值，调整对应逻辑即可。
• 若需要实现「所有选中列都必须匹配搜索词」的逻辑，可将isMatch初始化为true，遍历列时改为isMatch = isMatch && cellValue.includes(searchTerm)。

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