如何在DataTable中筛选出与指定列值不匹配的记录（不删除行）

嘿，我懂你的需求——不想通过删除行来实现筛选，而是用DataTables自带的筛选功能来隐藏不符合条件的行，这样原始数据还能保留，切换筛选条件时也能正常恢复显示对吧？

你之前的代码确实能得到结果，但删除行的方式会破坏表格的原始数据，后续切换下拉框选项时，之前删掉的行就找不回来了。咱们改用DataTables的自定义全局筛选器来实现，这才是更合适的做法。

解决方案代码 #

首先，先提前初始化DataTable实例（不要在change事件里重复初始化，否则会导致表格状态混乱），然后在下拉框的change事件中添加自定义筛选逻辑：

// 提前初始化DataTable并保存实例
var dtable = $('#example').DataTable();

$('#FilterByClass').on('change', function () {
    // 获取下拉框选中的值
    var selectedValue = $(this).val();

    // 移除之前添加的自定义筛选器，避免多个筛选器叠加
    $.fn.dataTable.ext.search.pop();

    // 添加新的自定义筛选规则
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        // data数组的索引从0开始，第三列对应索引2
        var colValue = data[2];
        
        // 逻辑：如果选中值为空（默认全显示），或者列值不等于选中值，就显示该行
        if (selectedValue === "" || colValue !== selectedValue) {
            return true;
        }
        // 否则隐藏该行
        return false;
    });

    // 重新绘制表格，应用筛选规则
    dtable.draw();
});

代码说明 #

1. 提前初始化DataTable：把实例保存到变量里，避免每次下拉框变化都重新创建表格实例，防止出现重复初始化的问题。
2. 自定义筛选器：$.fn.dataTable.ext.search是DataTables提供的全局筛选器数组，我们可以往里面添加筛选函数。每个函数会在表格绘制时被调用，返回true就显示对应行，false则隐藏。
3. 移除旧筛选器：每次切换下拉框时先调用pop()移除之前的筛选器，防止多个筛选规则叠加导致结果异常。
4. 筛选逻辑：如果下拉框没有选中值（空状态），就显示所有行；否则只保留第三列值与选中值不匹配的行。
5. 重新绘制表格：调用draw()让表格应用新的筛选规则，更新显示内容。

这种方式只是隐藏不符合条件的行，原始数据完全保留，当你切换下拉框选项时，表格能正确显示对应结果，不会丢失数据。

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