如何在jQuery DataTables中实现多列筛选的OR逻辑（含Excel导出）

嘿，我明白你现在的需求——原来的三个列筛选器是默认的AND逻辑（必须同时满足所有选中的筛选条件），现在要改成OR逻辑（只要满足其中一个筛选条件就显示该行）。咱们来一步步改：

问题根源 #

原来的代码里，每列的column.search()是独立执行的，DataTables默认会把这些搜索条件用AND组合起来。要实现OR，得重写DataTables的全局搜索逻辑，同时跟踪每个筛选器的选中值，最后在自定义搜索里判断该行是否符合任一条件。

修改后的完整代码 #

$(document).ready(function () {
    // 用来存储三个筛选列的选中值
    var filterValues = {
        column1: "",
        column5: "",
        column6: ""
    };

    var table = $('#studentTable').DataTable({
        "ajax": {
            "url": "/StructuredImportTgts/GetData",
            "type": "GET",
            "datatype": "json"
        },
        responsive: true,
        dom: 'Bfrtip',
        buttons: [ 'copy', 'excel', 'pdf' ],
        "columns": [
            { "data": "PART_NO" },
            { "data": "LEVEL" },
            { "data": "PART_NO" },
            { "data": "PART_NAME" },
            { "data": "L1QTY" },
            { "data": "PL1" },
            { "data": "PL2" },
            { "data": "PL3" },
            { "data": "SupplierLocID" },
            { "data": "SupplierLocID" },
            { "data": "Discrepancies" },
            { "data": "Comments" }
        ],
        initComplete: function () {
            var api = this.api();
            
            // 初始化列1（LEVEL列）的筛选器
            api.column(1).every(function () {
                var column = this;
                var select = $('<select><option value=""/></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        // 更新存储的筛选值
                        filterValues.column1 = $.fn.dataTable.util.escapeRegex($(this).val());
                        // 触发表格重绘（会调用自定义搜索逻辑）
                        table.draw();
                    });
                
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });

            // 初始化列5（PL1列）的筛选器
            api.column(5).every(function () {
                var column = this;
                var select = $('<select><option value=""/></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        filterValues.column5 = $.fn.dataTable.util.escapeRegex($(this).val());
                        table.draw();
                    });
                
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });

            // 初始化列6（PL2列）的筛选器
            api.column(6).every(function () {
                var column = this;
                var select = $('<select><option value=""/></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        filterValues.column6 = $.fn.dataTable.util.escapeRegex($(this).val());
                        table.draw();
                    });
                
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });

    // 重写DataTables的全局搜索逻辑，实现OR筛选
    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            // 获取当前行的对应列值（注意data数组的索引和列顺序一致）
            var levelValue = data[1];
            var pl1Value = data[5];
            var pl2Value = data[6];

            // 检查是否满足任一筛选条件
            // 如果某个筛选器为空，则跳过该条件
            var matchesLevel = filterValues.column1 === "" || levelValue.match(new RegExp('^' + filterValues.column1 + '$', 'i'));
            var matchesPl1 = filterValues.column5 === "" || pl1Value.match(new RegExp('^' + filterValues.column5 + '$', 'i'));
            var matchesPl2 = filterValues.column6 === "" || pl2Value.match(new RegExp('^' + filterValues.column6 + '$', 'i'));

            // 只要满足其中一个条件就返回true（显示该行）
            return matchesLevel || matchesPl1 || matchesPl2;
        }
    );
});

关键说明 #

1. 存储筛选值：用filterValues对象保存三个列的选中值，避免直接调用column.search()导致的AND叠加。
2. 自定义搜索逻辑：通过$.fn.dataTable.ext.search.push()添加全局搜索函数，这个函数会在每次表格重绘时检查每一行：
   • 如果某个筛选器没有选中值（为空），则跳过该条件的检查
   • 只要该行满足任一非空的筛选条件，就返回true，将该行保留在结果中
3. 触发重绘：每个下拉框的change事件更新筛选值后，调用table.draw()触发自定义搜索，而不是直接调用列的search()方法。

这样修改后，三个筛选器就会按照OR逻辑工作——只要行数据满足任意一个选中的筛选条件，就会被显示出来。

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