用于更新筛选器的选项卡范围滑块

Question

我目前正在使用范围滑块，但由于无法轻松 clear/update 以前的值过滤器而卡住了。这是从滑块获取值并在 table 上设置过滤器的代码。

function priceFilter(values){
    table.setFilter([
    {field:"price",type:">=", value: values[0]},
    {field:"price",type:"<=", value: values[1]},
    ]);
}

function gallonFilter(values){
    table.setFilter([
    {field:"gallons",type:">=", value: values[0]},
    {field:"gallons",type:"<=", value: values[1]},
    ]);
}

Here is a JSfiddle of what I currently have 没有按预期工作。这是由于 setFilter 清除了所有以前的过滤器。所以一次只有一个滑块在工作。

Here is one "solution" I have found 执行正确的行为，但看起来很尴尬，因为 table 在幻灯片上重新加载两次（一次开始，一次结束）。这是通过删除幻灯片开头的先前过滤器，然后在末尾添加新过滤器来实现的。

我如何更新这些过滤器中的值而不导致 table 重新加载，或者至少使其不可见？

Answer 1

setFilter函数旨在替换所有现有过滤器。如果您只是想向现有过滤器添加另一个过滤器，那么您应该使用 addFilter 函数

table.addFilter("age", ">", 22);

有关如何操作过滤器的完整详细信息，请参阅 Filter Management Documentation

用于更新筛选器的选项卡范围滑块

Tabulator range slider to update filter

javascript

jquery

nouislider

tabulator