jQuery Tablesorter 的自定义解析器

Question

我正在使用 jQuery Tablesorter，并且对表列应用解析器的顺序有问题。 我添加了一个自定义解析器来处理 $-3.33 形式的货币。

$.tablesorter.addParser({
    id: "fancyCurrency",
    is: function(s) {
      return /^\$[\-]?[0-9,\.]*$/.test(s);
    },
    format: function(s) {
      s = s.replace(/[$,]/g,'');
      return $.tablesorter.formatFloat( s );
    },
    type: "numeric"
});

问题似乎是内置货币解析器优先于我的自定义解析器。 我可以将解析器放在表排序器代码本身中（在货币解析器之前）并且它可以正常工作，但这不是很容易维护。 我无法使用类似以下内容手动指定排序器：

headers: {
    3: { sorter: "fancyNumber" },
    11: { sorter: "fancyCurrency" }
}

因为表列是根据用户输入动态生成的。 我想一种选择是指定排序器用作 css 类，并使用一些 JQuery 显式指定排序器，例如 这个问题建议，但如果可能的话，我更愿意坚持使用动态检测。

Answer 1

第一个选项是为具有货币值的列提供附加类“{'sorter':'currency'}”。 还要确保包含 tablesorter 支持的插件元数据。 这将引入每个元素选项并明确告诉 tablesorter 如何排序。

<link rel="stylesheet" href="/css/jquery/tablesorter/green/style.css" />
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.ui.core.js"></script>
<script src="/js/jquery.metadata.js"></script>
<script src="/js/jquery.tablesorter.js"></script>

<script>
    $(document).ready(function()
    {
    $("#table").tablesorter();
    }
    );
    </script>
</head>
<table id="table" class="tablesorter">
<thead>
  <tr>
    <th class="{'sorter':'currency'}">Currency</th>
    <th>Integer</th>
    <th>String</th>
  </tr>
</thead>
<tbody>
<tr>
  <td class="{'sorter':'currency'}">$3</td>
  <td>3</td>
  <td>three</td>
</tr>
<tr>
  <td class="{'sorter':'currency'}">-$3</td>
  <td>-3</td>
  <td>negative three</td>
</tr>
<tr>
  <td class="{'sorter':'currency'}">$1</td>
  <td>1</td>
  <td>one</td>
</tr>
</tbody>
</table>

此外，格式化货币的函数中存在一个错误：它不处理负数。

我已经提交了一个 bug，并且正在努力发布补丁。

第二个选项是将此修复应用于您的表排序器副本。 一旦应用了修复程序，您就不需要在 th 或 td 中指定货币分类器（无论如何在 td 中指定都太过分了）。

编辑jquery.tablesorter.js第724行：

return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9.]/g),""));

更改为：

返回 $.tablesorter.formatFloat(s.replace(new RegExp(/[^-0-9.]/g),""));

案例：

• 值：$-3,$1,$3

• 当前升序顺序：$1,$3,$-3

• 预计升序 $-3,$1,$3

案例：

• 值：-$3,$1,$3

• 当前升序顺序：$1,$3,-$3

• 预计升序 $-3,$1,$3

Answer 2

我遇到了类似的问题，并发现了 textExtraction 当您的单元格包含标记时推荐使用的选项。 然而，它作为预格式化程序运行得非常好！

$('table').tablesorter({
  textExtraction: function(s) {
    var text = $(s).text();
    if (text.charAt(0) === '
) {
      return text.replace(/[^0-9-.]/g, '');
    } else {
      return text;
    }
  }
});

Answer 3

我用过类似的东西，它对我有用。

在 header < 中使用此类 th class="{'sorter':'digit'}"> 并在列 < td class="{'sorter':'digit'}">。

完成后，更改 javascript 代码以获取数字形式的所有货币。

完成，享受排序！

这是代码：

标题：

  <th style='width: 98px;' class="{'sorter':'digit'}">
            Amount
   </th>

列（td）：

 <td align="left" style='width: 98px;' class="{'sorter':'digit'}">
            <%= Convert.ToDouble( a.AMOUNT ?? 0.0).ToString("C3") %>
 </td>

JAVASCRIPT：

<script language="javascript" type="text/javascript">
  jQuery("#rewardtable").tablesorter({
    textExtraction: function (data) {
        var text = $(data).text();
        if (text.toString().indexOf("-$") != -1) {
            return ("-" + text.replace(new RegExp(/[^0-9.]/g), ""));
        }
        else if (text.toString().indexOf("$") != -1) {
            return (text.replace(new RegExp(/[^-0-9.]/g), ""));
        }
        else {
            return text;
        }
    }
  });