DataTables多列过滤实现咨询：fnFilter仅支持单列参数

我来帮你搞定这个DataTables多列过滤的问题——确实，fnFilter()本身只能针对单列做过滤，没法直接传列数组实现多条件联合过滤，不过我们可以用DataTables的自定义搜索函数来完美适配你的需求，包括你用data-search属性的场景。

解决方案思路 #

DataTables允许我们通过$.fn.dataTable.ext.search添加自定义的过滤逻辑，这能灵活处理多列、多条件的组合过滤，完全替代fnFilter()的局限。核心思路是：监听复选框的状态变化，每次状态改变时重新触发表格绘制，在自定义过滤函数里同时校验两个复选框对应的条件。

具体代码实现 #

保留你原有的HTML结构，修改JavaScript部分如下：

$(document).ready(function() {
  // 初始化DataTables实例
  var table = $('#example').DataTable();

  // 添加自定义搜索过滤函数
  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      // 获取两个复选框的勾选状态
      const isPristineChecked = $('#pristine').is(':checked');
      const isCrestChecked = $('#crest').is(':checked');

      // 获取当前行的对应数据
      const itemType = data[1]; // "Item Type"是第二列，索引从0开始
      const crestSearchValue = $(table.row(dataIndex).node()).find('td[data-search]').data('search');

      // 初始化过滤通过状态
      let shouldShowRow = true;

      // 若Pristine复选框勾选，校验Item Type是否匹配
      if (isPristineChecked) {
        shouldShowRow = shouldShowRow && (itemType === 'Pristine');
      }

      // 若Crest复选框勾选，校验data-search属性值是否匹配
      if (isCrestChecked) {
        shouldShowRow = shouldShowRow && (crestSearchValue === 'yescrest');
      }

      return shouldShowRow;
    }
  );

  // 监听复选框状态变化，触发表格重绘更新过滤结果
  $('#pristine, #crest').on('change', function() {
    table.draw();
  });
});

关键细节说明 #

1. 自定义过滤函数：通过$.fn.dataTable.ext.search.push添加的函数会在每次表格绘制时执行，我们在这里实现联合过滤逻辑：

   • 对于常规数据列（比如"Item Type"），直接从data数组中取对应索引的值即可；
   • 对于用data-search属性的列，我们通过table.row(dataIndex).node()获取当前行的DOM节点，再提取目标td的data-search值；
   • 根据复选框的勾选状态，组合条件判断当前行是否需要显示。

2. 复选框事件监听：当任意一个复选框状态改变时，调用table.draw()触发表格重绘，此时自定义过滤函数会立即生效，更新表格的显示内容。

效果验证 #

当你同时勾选Pristine和Crest复选框时，表格只会显示Item Type为Pristine且Crest allowed的data-search值为yescrest的条目，完全符合你的需求。

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