如何在jQuery DataTables中按数字列排序

Question

如何在jQuery DataTables中按数字列排序

3

（查看了许多关于此主题的答案，但都不适用于这个问题。）

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"]);

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

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

这只是锁定了该列，使得该列标题中的上下箭头不起作用。

- DKean

4个回答

2

技术上，第二列包含字符串（1,000）-带逗号的数字，第三列也是一样-带百分比的数字。你最好将数据作为整数（没有逗号和%）传递给数据表，并编写自定义格式化程序，使用mRender选项添加逗号和百分比（在http://www.datatables.net/usage/columns中了解更多信息）。

如果您对数据添加了自定义格式，请不要忘记设置选项以使用底层数据作为排序源，而不是显示的数据。

- Michal

你说过：“不要忘记将选项设置为使用基础数据作为排序源，而不是显示的数据。” 我该如何确保这一点？ - DKean

在旧版本的datatables中，您将使用bUseRendered=false，但该选项现已弃用-请仔细阅读mData/mRender文档以获取替代方案。但最终它将是您必须设置的某个选项。 - Michal

疯狂地阅读...呃，认真地阅读...！ - DKean

1

如何使用mRender的信息太少了。给出的两个示例都是使用Ajax的，我无法理解。Datatables的作者也没有仔细记录该选项。 - DKean

我遇到了和DKean一模一样的问题。我对JavaScript不是很了解。请问有人可以贴出解决方案吗？ - Lyman Zerga

0

你需要定义一个排序函数（尝试使用选择排序或插入排序），并尝试将数据变量存储在数组中进行计算，或者直接对数据进行排序。

- Oussaki

我需要做的是找到他们的排序函数所在位置并替换它。你能帮我找到它吗？否则，排序将不会是动态的。用户需要有权按每一列进行排序，就像现在设置的那样。我不能失去标题列中小三角形的功能。 - DKean

0

你好，我使用了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个列，并且想要对包含数字的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]

- Georges

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pete · Accepted Answer

你的问题是数字没有被正确识别，即使它们被识别了，你数字中的逗号可能会影响排序功能（因为它可能无法正确地将它们删除）。

你可以选择实现自己的排序函数来正确处理数字。以下是一个示例，可以满足你的需求：

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

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