如何对 jQuery DataTables 中的数字列进行排序答案

【问题标题】：How to sort on a numeric column in jQuery DataTables如何对 jQuery DataTables 中的数字列进行排序
【发布时间】：2013-03-06 21:27:09
【问题描述】：

（看了一堆关于这个话题的答案，没有一个适用于这个问题。）

DataTables 具有让用户单击每列的向上/向下三角形图标以按升序或降序排序的功能。我已经加载数据如下

        oTable.fnAddData( ["Bogus data","1,541,512","12.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","3,541,512","2.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","541,512","1.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","2,541,512","32.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","741,512","3.5%","0","0","0"]);
        oTable.fnAddData( ["A Bogus data","41,512","1.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","2,541,512","12.5%","0","0","0"]);
        oTable.fnAddData( ["Z Bogus data","1,541,512","12.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","3,541,512","2.5%","0","0","0"]);
        oTable.fnAddData( ["La Bogus data","541,512","1.5%","0","0","0"]);
        oTable.fnAddData( ["The Bogus data","2,541,512","32.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","741,512","3.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","41,512","1.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","2,541,512","12.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","1,541,512","12.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","3,541,512","2.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","541,512","1.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","2,541,512","32.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","741,512","3.5%","0","0","0"]);
        oTable.fnAddData( ["Bogus data","41,512","1.5%","0","0","0"]);

在第 2 列中，当我单击向上/向下三角形时，数值按字母顺序处理。如何调整它以便第二列向上/向下箭头将触发正确的方式，将字符视为数字。我尝试使用以下初始化：

oTable = $('.utable').dataTable( {
"aoColumns": [{ sWidth: '60%' },{sWidth: '30%', "sType": "numeric"},{ sWidth: '10%' }],
"sDom": 'rt',
"sScrollY":"200px",
"bPaginate":false,
"bFilter":false,
"bInfo": false});

所有这些都是锁定列，向上/向下图标在该列的标题中不起作用。

【问题讨论】：

标签： javascript jquery html datatables

【解决方案1】：

您的问题是数字没有被识别，即使它们被识别，数字中的逗号也可能会关闭排序功能（因为它可能无法正确删除它们）。

您可以选择实现自己的排序功能，以正确处理您的数字。这是一个满足您需要的示例：

http://live.datatables.net/oborug/2/edit

PS -- 以下是相关文档：http://datatables.net/development/sorting

【讨论】：

皮特，你这个无赖。你完全理解了这个问题！你摇滚，伙计！谢谢...它马上就奏效了！这还有待我仔细梳理。
非常感谢你，伙计。我断断续续地折腾了几天，但没有成功。这个解决方案很熟练，因为答案可能是！
这看起来不错——但我一定遗漏了一些东西，也许只是看错了——当我从发布的链接转到那个例子时，它的行为与宣传的完全一样，但我不能一辈子我看到了自定义排序代码，或者它可能是如何包含在内的——这个功能可能已经在夜间构建中了吗？还是我找错地方了？

【解决方案2】：

从技术上讲，第 2 列包含字符串 (1,000) - 带逗号的数字，第 3 列也是如此 - 带百分比的数字）。最好的办法是将数据作为整数（不带逗号和 %）传递给数据表，并编写自定义格式化程序以使用 mRender 选项添加逗号和百分比（请参阅 >http://www.datatables.net/usage/columns）。

如果您向数据添加自定义格式，也不要忘记将选项设置为使用基础数据作为排序源，而不是显示的数据。

【讨论】：

您说，“...不要忘记将选项设置为使用基础数据作为排序源，而不是显示的数据。”我如何确保这一点？
在旧版本的数据表中，您可以使用 bUseRendered=false 但该选项现在已弃用 - 请仔细阅读 mData/mRender 文档作为替代方案。但最终这将是您必须设置的一些选项
疯狂阅读...认真犯错...！
关于如何使用 mRender 的信息太少了。给出的两个示例是使用 Ajax，我无法通过它进行清除。而 Datatables 的作者根本没有足够仔细地记录该选项。
我遇到了和 DKean 完全相同的问题。我对 JavaScript 了解不多。有人可以发布解决方案吗？

【解决方案3】：

您必须定义一个排序功能（尝试使用按选择排序或按插入排序）尝试将数据变量存储在数组中并进行计算，否则您可以直接使用数据进行排序

【讨论】：

我需要做的是找到它们的排序功能所在并替换它。你能帮我找到它，否则排序不会是动态的。用户需要能够按照现在设置的方式按每一列进行排序。我不能失去标题列中小三角形的功能

【解决方案4】：

您好，我使用 parseFloat 和替换方法制作了这个，并使用了这个示例 http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html

jQuery.fn.dataTableExt.oSort["string-nbr-asc"]  = function(x,y) {return ((parseFloat(x.replace(",","")) < parseFloat(y.replace(",",""))) ? -1 : ((parseFloat(x.replace(",","")) > parseFloat(y.replace(",",""))) ?  1 : 0));};

jQuery.fn.dataTableExt.oSort["string-nbr-desc"] = function(x,y) {return ((parseFloat(x.replace(",","")) < parseFloat(y.replace(",",""))) ?  1 : ((parseFloat(x.replace(",","")) > parseFloat(y.replace(",",""))) ? -1 : 0));};

如果您有 10 列并且想要 sort 7,8,9 至于像 7,081 1,925.49 这样的数字，请使用

"aoColumns":[null,null,null,null,null,null,{ "sType": "string-nbr" },{ "sType": "string-nbr" },{ "sType": "string-nbr" },null]

【讨论】：