javascript - 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>

和 tablesorter 的自定义解析器:

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 ，默认(自动检测)货币解析器将使用提供的货币值 ( demo )。

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