select值变更时如何对Datatables的非文本类型列实现搜索筛选

实现方案 #

你遇到的问题是默认Datatables全局搜索只会匹配列内可见文本，对于没有文本内容的样式标签自然无法匹配，可通过以下两种方案实现需求：

方案一：通过列渲染配置兼容默认搜索（改动最小） #

在Datatables初始化的columnDefs配置中，给status列单独设置渲染规则，指定筛选/排序时使用状态值，渲染时返回彩色方块HTML即可，你原来的下拉框搜索代码无需改动。
示例代码：

const DT1 = $('#你的表格ID').DataTable({
  // 其他原有配置保持不变
  columnDefs: [
    {
      targets: 2, // 替换为你status列的实际索引（从0开始计数）
      render: function(data, type, row) {
        // 筛选、排序场景下返回原始状态值供匹配
        if (type === 'filter' || type === 'sort') {
          // 替换为你行数据中存储的状态字段，比如active/inactive
          return row.status;
        }
        // 页面渲染场景返回彩色方块HTML
        if (row.status === 'active') {
          return '<span class="badge bg-success" style="width:15px;height:15px;display:inline-block;border-radius:3px"></span>';
        } else {
          return '<span class="badge bg-danger" style="width:15px;height:15px;display:inline-block;border-radius:3px"></span>';
        }
      }
    }
  ]
});

配置完成后你原来的下拉框触发代码可以直接正常使用：

$('#search2').on('change', () => {
    DT1.search($('#search2').val()).draw();
});

方案二：自定义Datatables筛选规则 #

如果不方便修改列渲染配置，可以通过Datatables的自定义搜索扩展实现，直接匹配status列元素的样式类即可：
示例代码：

// 存储当前选中的筛选状态
let selectedStatus = '';

// 下拉框change事件
$('#search2').on('change', () => {
  selectedStatus = $('#search2').val().trim();
  DT1.draw();
});

// 注册自定义筛选规则
$.fn.dataTable.ext.search.push(
  function(settings, searchData, index, rowData, counter) {
    const statusColIndex = 2; // 替换为你status列的实际索引
    // 未选择筛选条件时返回所有行
    if (!selectedStatus) return true;
    // 拿到当前行status列的DOM节点
    const statusCell = DT1.cell(counter, statusColIndex).node();
    // 判断彩色方块的样式类，这里根据你实际使用的类名调整
    const hasActiveClass = statusCell.querySelector('.bg-success') !== null;
    // 匹配选中的状态
    return (selectedStatus === 'Active' && hasActiveClass) || (selectedStatus === 'Inactive' && !hasActiveClass);
  }
);

注意：两种方案都需要把示例中的列索引、样式类名、状态字段替换为你实际项目中的对应值即可生效。

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