TableSorter:filter_functions和按值排序

Question

我正在使用带有滤镜窗口的表格的最新版本(2.28.8(，并希望：

1. 按ASC/DESC订单按百分比列表进行排序
2. 定义一个自定义过滤器列出一些预定义范围
3. 命令我的自定义过滤器上升一个(＆lt; 5％然后10％-20％，...(

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

这是一个演示：

• min列的数字在数据文本中定义以定义顺序
• 最大列没有。

=>我们可以更正确地执行此操作吗？(上面列表的目标＃3(

观察到的：过滤器工作正常。但是点击ASC/DESC是错误的。请注意，最大列的降序是正确的，但升级顺序不正确。

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

我看到了这个示例，但是由于我在此插件上有足够的表格，因此我应该为单个表应用程序台上的efter_functions提供一种方法。

tablesorter称为：

$(".tablesorter-scroll").tablesorter({
    widthFixed : false,
    showProcessing: true,
    widgets: ['filter', 'columnSelector', 'scroller'],
    ...
});

希望我很清楚，请不要犹豫。感谢您的时间。

Answer 1

查看filter_functions演示。您可以定义一组滤波器功能以应用于选择。此外，您可以将类添加到标题中的目标，而不是为每列定义一个函数：

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