Tabulator 4.6表头过滤器清除后未重置问题求助

嘿，我来帮你搞定这个问题！你遇到的情况是因为**同时设置了initialHeaderFilter和initialFilter**导致的——这两个配置会叠加生效，当你清除表头的Relation_Status过滤器时，initialFilter里的条件还在后台悄悄生效，所以页面还是只显示Active状态的数据。

问题根源 #

Tabulator中，initialFilter是添加全局的永久基础过滤器，除非你手动通过代码移除它；而initialHeaderFilter只是设置表头过滤器的初始选中状态，用户可以手动清除。你同时启用这两个配置，就相当于给数据加了双重过滤：表头过滤器的Active条件 + 全局初始的Active条件。当你清除表头的那个后，全局的过滤器还在，所以自然看不到Inactive的数据。

解决方案（推荐第一种） #

方案1：仅保留initialHeaderFilter，移除initialFilter

这是最直接的方法，完全符合你的需求：页面加载时表头默认选中Active，用户清除过滤器后就能看到全部数据。

修改后的代码：

$('#example-table').tabulator({
    layout:"fitColumns",
    pagination:"local", // 本地分页
    paginationSize:5,
    // 只保留表头初始过滤设置，去掉全局初始过滤器
    initialHeaderFilter: [{field:'Relation_Status', value:'Active'}],
    columns: [
        { 
            field: "Relation_Type", 
            title: 'Relation Type', 
            headerFilterParams:{values:true}, 
            headerFilter:"select", 
            headerFilterParams:paramLookup 
        },
        { 
            field: "Relation_Status", 
            title: 'Relation Status', 
            editorParams:{values:{"Active":"Active", "Inactive":"Inactive"}}, 
            editor:"select", 
            headerFilterParams:{values:true}, 
            headerFilter:"select" 
        },
        { field: "Related_clientCompany", title: 'Related Company' },
        { field: "Job_Link", title: 'Action ' },
    ]
});
$("#example-table").tabulator("setData", RelatedCompanies);

方案2：保留initialFilter，添加过滤器监听事件移除全局条件

如果你有特殊需求必须保留initialFilter，可以监听表头过滤器的变化事件，当用户清除Relation_Status的过滤值时，手动移除全局的初始过滤器：

$('#example-table').tabulator({
    layout:"fitColumns",
    pagination:"local",
    paginationSize:5,
    initialHeaderFilter: [{field:'Relation_Status', value:'Active'}],
    initialFilter:[ {field:"Relation_Status", type:"=", value:"Active"}],
    columns: [
        { 
            field: "Relation_Type", 
            title: 'Relation Type', 
            headerFilterParams:{values:true}, 
            headerFilter:"select", 
            headerFilterParams:paramLookup 
        },
        { 
            field: "Relation_Status", 
            title: 'Relation Status', 
            editorParams:{values:{"Active":"Active", "Inactive":"Inactive"}}, 
            editor:"select", 
            headerFilterParams:{values:true}, 
            headerFilter:"select" 
        },
        { field: "Related_clientCompany", title: 'Related Company' },
        { field: "Job_Link", title: 'Action ' },
    ],
    // 监听表头过滤器变化事件
    headerFilterChanged:function(field, value){
        // 当Relation_Status过滤器被清空时
        if(field === "Relation_Status" && !value){
            // 移除对应字段的全局过滤器
            $("#example-table").tabulator("removeFilter", "Relation_Status");
        }
    }
});
$("#example-table").tabulator("setData", RelatedCompanies);

总结 #

方案1是最简洁且符合你需求的选择，因为它完全依赖表头过滤器的初始状态，没有额外的全局过滤条件，用户操作起来完全符合预期。

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