Tabulator多列全局搜索异常：添加第二列后表格空白求助

问题背景 #

将表格从DataTable切换到Tabulator后，全局搜索功能出现异常：

• 仅配置event_title列时，模糊搜索正常工作
• 添加uniqueID列并尝试实现OR逻辑匹配时，按下回车表格变为空白

问题原因 #

Tabulator的setFilter方法默认采用AND逻辑处理多个过滤器条件。原代码中直接传入两个过滤器对象，会要求搜索值同时匹配event_title和uniqueID才会显示行，导致绝大多数场景下无匹配结果，表格空白。

解决方案 #

方案1：指定OR逻辑的多列搜索

使用Tabulator的过滤器组语法，明确将多个列的匹配条件设置为OR关系：

var opt = $('#cf_header_search_option').val(); 

if (opt == 'grid') {
    if (type !== 'tabulator') {
        cfHeader_searchDataGrid(dataTable);
    } else {
        var searchValue = $('#header_search_query').val().trim().toLowerCase();
        // 使用or组实现多列任意匹配
        table.setFilter([
            {
                or: [
                    { field: 'event_title', type: 'like', value: searchValue },
                    { field: 'uniqueID', type: 'like', value: searchValue }
                ]
            }
        ]);
    }
} else {
    $('#cf_header_search_form').submit();
    return true;
}          

方案2：自定义全局过滤器（支持所有列模糊匹配）

如果需要实现任意列的模糊匹配（而非仅指定列），可以使用自定义过滤器函数：

var opt = $('#cf_header_search_option').val(); 

if (opt == 'grid') {
    if (type !== 'tabulator') {
        cfHeader_searchDataGrid(dataTable);
    } else {
        var searchValue = $('#header_search_query').val().trim().toLowerCase();
        // 自定义过滤器：任意列包含搜索词即保留该行
        table.setFilter(function(data) {
            if (!searchValue) return true; // 空搜索时显示全部数据
            // 遍历当前行所有字段
            for (const key in data) {
                const fieldValue = data[key] ? String(data[key]).toLowerCase() : '';
                if (fieldValue.includes(searchValue)) {
                    return true;
                }
            }
            return false;
        });
    }
} else {
    $('#cf_header_search_form').submit();
    return true;
}          

关键注意事项 #

• 移除原代码中的headerFilter: true配置，该参数用于开启列头本地过滤器，与全局搜索逻辑无关
• 统一将搜索值和列值转为小写，确保模糊匹配不区分大小写
• 处理空搜索场景，避免输入为空时表格空白

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