允许 Tablesorter 过滤器小部件 filter_functions 以外部下拉列表为目标

Question

我正在使用库的分支版本 2.20.1 并安装了过滤器小部件。我们真的不想使用内联过滤框，所以我们设置了 filter_columnFilters: false 和 filter_external: '.search'。这很棒，因为它允许我们的搜索框与 table.

分开

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

第一个想法是使用内置 filter_functions:

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 选择器似乎只针对 table 中的 tr 标签。

我的第二个想法是调用自定义过滤器函数。类似 $("table").tablesorter.filter() 的东西，但我看不到任何进行手动过滤的功能。

关于如何实现此目标的任何想法？还有没有想到的第三种选择？

Answer 1

filter_functionselect或需要匹配列headerclass.

在this example中，我们将headerclass设置为"english"

<th class="english">English</th>

添加一个外部 select（包括一个选项 value 属性，否则 IE 将无法工作）； data-column 属性也是必需的。

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>

然后设置 filter_functions 以 header class 名称为目标，并包含与选项值匹配的键：

$(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; }
                }
            }
        }
    });
});

允许 Tablesorter 过滤器小部件 filter_functions 以外部下拉列表为目标

Allowing Tablesorter filter widget filter_functions to target an external dropdown

javascript

jquery

tablesorter