jQuery tablesorter 排序格式化货币

Question

编辑，基于莫蒂回答的新代码：

jQuery.tablesorter.addParser({
    id: "monetaryValue",
    is: function (s) {
        return false;
    }, format: function (s) {
        return s.replace('$','').replace(/,/g,'');
    }, type: "numeric"
});
var tablezor = jQuery(".tablesorter");
tablezor.tablesorter({
        headers: {
            4 : { sorter: "monetaryValue" }
        },
        sortList: [[7,0]]
});

和 HTML：

<table class="tablesorter">
<thead>
    <tr>
        ...
        <th>Processing Fees</th>
        ...
    </tr>
</thead>
<tbody>
{% for cs in customer_stats %}
    <tr class="js_striped">
        ...
        <td>
            <script>
                var options = {style:"currency", currency:"USD", minimumFractionDigits: 2,maximumFractionDigits: 2};
                document.write(new Intl.NumberFormat("en-US", options).format({{ customer_stats[cs]['processing_fee'] }}));
            </script>
        </td>
        ....
    </tr>
{% endfor %}
</tbody>
</table>

我已经尝试了十几个示例来解决这个问题，但没有任何效果。

我正在使用 jQuery.tablesorter 对表格进行排序，当我将数字格式化为货币（美元，格式为 $1,945.00）时，货币列无法正确排序

这是一个 Django 模板，模板变量呈现为未格式化的数字，如 1945.0，因此我需要使用 javascript 添加格式。我想使用 Humanize 模板过滤器库，但我们使用 Jinja，它没有那个。我需要在客户端进行格式化，因此 python 建议可能行不通。

当它只是一个数字时，它排序很好。当我使用一个小脚本标签（是的，我知道这不是最好的方法，这是一个短期修复，直到我们用 Backbone 重新编写前端）将数字格式化为货币时，排序不会工作。它排序如下：

3,380.00 美元

350.00 美元

353.24 美元

3,535.24 美元

等

这是格式化为货币的函数：

function formatDollar(num) {
    var p = num.toFixed(2).split(".");
    return '$' + p[0].split("").reverse().reduce(function(acc, num, i, orig) {
        return  num + (i && !(i % 3) ? "," : "") + acc;
    }, "") + "." + p[1];
}

这是 HTML：

<table class="tablesorter">
    <thead>
        <tr>
            ...
            <th class="{sorter:'monetaryValue'}">Processing Fees</th>
            ...
        </tr>
    </thead>
    <tbody>
    {% for cs in customer_stats %}
        <tr class="js_striped">
            ...
            <td>
                <script>
                    var money = formatDollar({{ customer_stats[cs]['processing_fee'] }});
                    document.write(money);
                </script>
            </td>
            ....
        </tr>
    {% endfor %}
    </tbody>
</table>

以及表排序器的自定义解析器：

var tablezor = jQuery(".tablesorter");
tablezor.tablesorter({
        sortList: [[1,1]]
});
tablezor.addParser({
    id: "monetaryValue",
    is: function (s) {
        return false;
    }, format: function (s) {
        return s.replace('$','').replace(/,/g,'');
    }, type: "numeric"
});

随时告诉我这有多可怕；如果您能告诉我如何让 tablesorter 正确排序货币，欢迎任何批评。

谢谢，

Answer 1

这里的主要问题是需要使用 $.tablesorter.addParser() 添加解析器，而不是 $('.tablesorter').addParser()。

jQuery.tablesorter.addParser({
    id: "monetaryValue",
    is: function (s) {
        return false;
    }, format: function (s) {
        var n = parseFloat( s.replace('$','').replace(/,/g,'') );
        return isNaN(n) ? s : n;
    }, type: "numeric"
});
var tablezor = jQuery(".tablesorter");
tablezor.tablesorter({
        headers: {
            0 : { sorter: "monetaryValue" }
        },
        sortList: [[1,1]]
});

如果你用的是我的 fork of tablesorter, the default (automatically detected) currency parser will work with the provided currency values (demo).

对于来自其他国家的货币，只需将 usNumberFormat option 设置为 false。

Answer 2

我的问题的解决方案是在服务器上进行格式化。

这可能是一个教训，不要在我的标记中加入骇人听闻的废话。

郑重声明，在我的 Django 视图中，我这样做了：

customer_stats[c['customer']]['processing_fee'] = '${:,.2f}'.format(float(c['processing_fee']))

然后我删除了自定义解析器并使用了这个：

tablezor.tablesorter({
    sortList: [[4,1]],
    textExtraction: function(node){ 
        return $(node).text().replace(/[,$£€]/g,'');
     }
});

textExtraction 处理了解析问题。

再次感谢 Mottie 所做的一切努力。

jQuery tablesorter 排序格式化货币

jQuery tablesorter sorting formatted currency

javascript

sorting

django

tablesorter