Tablesorter : filter_functions 并按值排序

Question

我正在使用带有过滤器小部件的最新版本 (2.28.8) 的表格排序器，并希望：

1. 按 ASC/DESC 顺序按百分比列表排序
2. 定义一个自定义过滤器来列出一些预定义的范围
3. 让我的自定义过滤器升一（

我正在定义这样的：<td data-text="5-10%">10</td> 以具有范围过滤器。

这是demo：

• Min Column 在数据文本中定义了数字以定义顺序
• Max 列没有。

=> 我们可以更正确地做到这一点吗？ （上面列表中的目标 #3）

观察到：过滤器工作正常。但是单击 ASC/DESC 是错误的。请注意，Max 列的降序是正确的，而不是升序。

预期：如何实现我的 3 个目标？

我看到了this example，但是由于我有很多使用这个插件的表，我应该为已经初始化表排序器的单个表应用 filter_functions 的好方法。

Tablesorter 被调用：

$(".tablesorter-scroll").tablesorter({
    widthFixed : false,
    showProcessing: true,

    widgets: ['filter', 'columnSelector', 'scroller'],
    ...
});

希望我已经足够清楚了，请不要犹豫。 感谢您的宝贵时间。

Answer 1

查看filter_functions demo。您可以定义一组过滤器函数以应用于选择。此外，您可以在标题中添加一个类来定位，而不是为每一列定义一个函数：

HTML

<table id="task">
  <thead>
    <tr>
      <th class='ranges filter-onlyAvail'>Min [%]</th>
      <th class='ranges filter-onlyAvail'>Max [%]</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5 %</td>
      <td>10 %</td>
    </tr>
    <tr>
      <td>50 %</td>
      <td>100 %</td>
    </tr>
    <tr>
      <td>0 %</td>
      <td>4 %</td>
    </tr>
    <tr>
      <td>10 %</td>
      <td>15 %</td>
    </tr>
    <tr>
      <td>25 %</td>
      <td>50 %</td>
    </tr>
  </tbody>
</table>

脚本

$(function() {
  $("#task").tablesorter({
    widgets: ["zebra", "filter"],
    widgetOptions: {
      filter_functions: {
        '.ranges' : {
          '<= 5%': function(e, n) { return n <= 5; },
          '10% - 20%': function(e, n) { return n >= 10 && n <= 20; },
          '20% - 50%': function(e, n) { return n >= 20 && n <= 50; },
          '>= 50%': function(e, n) { return n >= 50; }
        }
      }
    }
  });
});