带有 number_format() 的 jQuery 表格排序器；答案

【问题标题】：jQuery tablesorter with number_format();带有 number_format() 的 jQuery 表格排序器；
【发布时间】：2013-02-04 14:46:07
【问题描述】：

我正在使用 jQuery 表格排序器插件，我想通过在千位上使用逗号分隔符使表格更具可读性，即 number_format($value, 0, " ", ",");

但是，这会破坏排序。我一直在寻找解决方案（例如http://lab.christianmontoya.com/jquery-tablesort-numbers-commas/），但我没有设法调整它并适应我的桌子。我是脚本新手，所以请放纵一下。

我的 javascript 块应该是什么样的？

<head>
<script type="text/javascript">
    $(document).ready(function() { 
        $("#myTable").tablesorter( {
            sortList: [[1,1], [2,1]],
            widgets: ['zebra'],
        } );
    }); 
</script>
</head>


<body>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
<th>Username</th> 
<th>Level</th> 
<th>Experience</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Fiery</td> 
<td><?php echo number_format(2400, 0, " ", ","); ?></td> 
<td><?php echo number_format(378433689, 0, " ", ",");?></td> 
</tr> 
<tr> 
<td>Sixten</td> 
<td><?php echo number_format(1600, 0, " ", ","); ?></td> 
<td><?php echo number_format(1000000000, 0, " ", ",");?></td> 
</tr> 
<tr>                    
<td>Penny</td> 
<td><?php echo number_format(885, 0, " ", ","); ?></td> 
<td><?php echo number_format(8900002, 0, " ", ","); ?></td> 
</tr> 
<tr>
<td>Petra</td> 
<td><?php echo number_format(2400, 0, " ", ","); ?></td> 
<td><?php echo number_format(398433889, 0, " ", ","); ?></td> 
</tr> 
<tr>
<td>Neu</td> 
<td><?php echo number_format(4974, 0, " ", ","); ?></td> 
<td><?php echo number_format(198433889, 0, " ", ","); ?></td> 
</tr> 
</tbody> 
</table>
</body>

【问题讨论】：

标签： jquery tablesorter number-formatting

【解决方案1】：

您需要将自定义格式应用于所需的标题/列：

标记：

<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
        <thead>
            <tr>
                <th>
                    Price
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    1,000.00
                </td>
            </tr>
            <tr>
                <td>
                    100,100.00
                </td>
            </tr>
            <tr>
                <td>
                    100,980.00
                </td>
            </tr>
            <tr>
                <td>
                    100,122.00
                </td>
            </tr>
            <tr>
                <td>
                    120,122.00
                </td>
            </tr>
            <tr>
                <td>
                    540,122.00
                </td>
            </tr>
            <tr>
                <td>
                    222,122.00
                </td>
            </tr>
            <tr>
                <td>
                    100,020.00
                </td>
            </tr>
            <tr>
                <td>
                    100,251.00
                </td>
            </tr>
            <tr>
                <td>
                    100,364.00
                </td>
            </tr>
            <tr>
                <td>
                    300,122.00
                </td>
            </tr>
        </tbody>
    </table>

jQuery:

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

        $("#myTable").tablesorter({
            headers: { 0: { sorter: 'fancyNumber'} },
            widgets: ['zebra']
        });
    });

JSFiddle：http://jsfiddle.net/eAgDC/

【讨论】：

感谢您的快速回复。不过，一个问题仍然存在。它按第一个分隔符对数字进行排序，例如1,000,000,000 为 1，而在我的表中，它的意思是 10 亿。有解决办法吗？
你必须告诉我你的意思。请创建一个 jsFiddle 以便我可以看到它。
我不确定如何向您展示我在代码中的意思。我不希望逗号分隔符对数字的评估产生任何影响。例如。我希望“2,400”被评估（并排序）为“2400”（好像没有分隔符）。现在 2,400 被排序为“2,4”。你明白我的意思吗？
我明白你的意思。让我看看我能做什么。
我测试了几个数字，效果很好。您是否尝试过 jsFiddle 上的示例？它不会将 2,400 视为 2,4 而是将其视为 2400 （您甚至可以尝试添加不带逗号的 2400 并且仍然有效，实际上这就是替换功能正在做的事情，去掉逗号并将其作为一个整体进行评估。 )