Javascript 允许Tablesorter filter小部件filter_函数以外部下拉菜单为目标

我正在使用库的分叉版本2.20.1，并安装了过滤器小部件。我们真的不想使用内联筛选框，所以我们设置了

filter\u columnFilters:false

和

filter\u external:'。search'

。这很好，因为它允许我们的搜索框与表分开

我们还希望在表的外部有一个下拉过滤器。我有两个想法如何实现这一点，但需要指出正确的方向，因为我还没有使任何一个工作

第一个想法是使用内置的

过滤器功能

：

filter_functions:
   {
      "#dateSelection": 
      {
         "30 Days": function(e, n, f, i, $r) { return ...; },
         "6 Months": function(e, n, f, i, $r) { return ...; },
         "All Time": function(e, n, f, i, $r) { return ...; }
      }
   }

但是，jquery选择器似乎只针对表中的

tr

标记

我的第二个想法是调用自定义筛选函数。类似于

$（“table”）.tablesorter.filter（）

但我看不到任何可以进行手动筛选的函数

---

有什么办法可以做到这一点吗？还有第三个选项是我没有想到的吗？

过滤器功能选择器需要匹配列标题类

在中，我们将header类设置为“english”

然后设置

filter_函数

以标题类名为目标，并包括与选项值匹配的键：

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_columnFilters: false,
            filter_external: '.search',
            filter_functions : {
                '.english' : {
                    'less-than-50' : function(e, n) { return n < 50; },
                    'between 50 & 90' : function(e, n) { return n >= 50 && n <= 90; },
                    'greater than 90' : function(e, n) { return n > 90; }
                }
            }
        }
    });
});

$（函数（）{
$（'table'）.tablesorter({
主题:"蓝色",，
小部件：['zebra'，'filter']，
widgetOptions：{
筛选器\列筛选器：false，
筛选器_外部：'.search'，
过滤器功能：{
“.english”：{
“小于50”：函数（e，n）{返回n<50；}，
“介于50和90之间”：函数（e，n）{返回n>=50&&n90；}
}
}
}
});
});

你是对的。我误解了filter_函数键值的含义。我还缺少选择框上的搜索类。该示例非常适合解决这些问题。实际上，对于内置搜索，您甚至不需要

filter\u函数

定义。因此，上面的例子可以简化（）-我在这个例子中保留了

过滤器函数

的完整性，以防您需要进行更复杂的比较，一个不是默认值之一的比较。是否可以将第二个选项设为默认值？将

选中的

添加到该选项中，然后添加一个

数据值=“第二个选项值”

（数据值属性可以通过更改-我在我的场景中的默认值有问题。我为它创建了一个问题，因为它超出了这个问题。不过感谢这里的帮助！

English Scores: <select class="search" data-column="3">
    <option value="">All</option>
    <option value="less-than-50">&lt; 50</option>
    <option value="between 50 & 90">50 to 90</option>
    <option value="greater than 90">&gt; 90</option>
</select>

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_columnFilters: false,
            filter_external: '.search',
            filter_functions : {
                '.english' : {
                    'less-than-50' : function(e, n) { return n < 50; },
                    'between 50 & 90' : function(e, n) { return n >= 50 && n <= 90; },
                    'greater than 90' : function(e, n) { return n > 90; }
                }
            }
        }
    });
});