Question

我使用带有过滤器小部件的最新版本（2.28.8）的tablesorter，并希望：

按ASC / DESC顺序按百分比列表排序
定义自定义过滤器以列出某些预定义范围
命令我的自定义过滤器升序一个（＆lt; 5％然后10％-20％，...）

我确定如此：<td data-text="5-10%">10</td>有范围过滤器。

这是demo：

最小列在数据文本中定义了数字以定义订单
最大列没有。

=＆GT;我们能更恰当地做到这一点吗？（上面列出的目标＃3）

观察：过滤器运行正常。但点击ASC / DESC是错误的。请注意，降序对于Max列是正确的，而不是升序。

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

我看到了this example但是由于我有足够的表来使用这个插件，我应该很好地将filter_functions应用于已经初始化了tablesorter的单个表。

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

Tablesorter：filter_functions并按值排序

1 个答案: