Tablesorter : filter_functions 并按值排序

Question

我正在使用带过滤器小部件的 tablesorter 的最新版本 (2.28.8)，我想：

按 ASC/DESC 顺序
定义自定义过滤器以列出一些预定义范围
将我的自定义过滤器设置为升序（<5% 然后 10%-20%，...）

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

这是一个demo：

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

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

Observed ：过滤器工作正常。但是点击ASC/DESC是错误的。请注意，降序对于 Max 列是正确的，但升序是不正确的。

预期：我怎样才能实现我的 3 个目标？

我看到了 this example 但由于我有很多 table 这个插件，我应该找到一种方法来为单个 table 应用 filter_functions 已经table分类器已初始化。

Tablesorter 被调用：

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

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

希望我说得够清楚，不要犹豫，尽管问。谢谢你的时间。

Answer 1

查看 filter_functions demo。您可以定义一组过滤函数以应用于 select。此外，您可以将 class 添加到 header 来定位而不是为每一列定义一个函数：

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 并按值排序

Tablesorter : filter_functions and sort by value

jquery

jquery-plugins

tablesorter