Tablesorter : filter_functions 并按值排序

Posted 2023-05-09

【中文标题】Tablesorter : filter_functions 并按值排序

【英文标题】：Tablesorter : filter_functions and sort by value

【发布时间】：2017-09-28 18:38:28

【问题描述】：

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

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

我正在定义这样的：<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'],
    ...
);

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

【参考方案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; 
        
      
    
  );
);

【讨论】：

哇！我喜欢它 ！！非常聪明的解决方案。简单并回答我所有的 3 个问题。非常感谢 Mottie，我非常感谢您的插件和您非常快速的答案。

P.S：对于任何来这篇文章的人，我忘了提到JS上有一个错字错误：在数字参数'<= 5%': function(e, n,)之后有一个额外的逗号@

谢谢，我删除了多余的逗号！不客气！ :D