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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15258407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 14:40:40  来源:igfitidea点击:

How to sort on a numeric column in jQuery DataTables

javascriptjqueryhtmldatatables

提问by DKean

(Looked at a bunch of answers on this topic, none of which applies to this question.)

(看了一堆关于这个话题的答案,没有一个适用于这个问题。)

The DataTables have the feature of letting the user click on each column's Up/Down triangle icons to sort in Ascending or Descending order. I have loaded the data as follows

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

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

In column number 2 the numeric values are processed alphabetically when I click on the Up/Down triangles. How can I adjust it so that the second column Up/Down arrows will trigger the proper way, treating the characters as numbers. I tried using the following initialization:

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

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

All this does is to lock the colum and the Up/Down icons will not work in the header of that column.

所有这一切都是为了锁定列,并且向上/向下图标在该列的标题中不起作用。

Please help

请帮忙

DKean

迪安

回答by Pete

Your problem is that the numbers are not being recognized as such and even if they were, the commas in your numbers would probably the sorting function off (because it will probably not properly remove them).

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

One option you have is to implement your own sorting function which deals with your numbers properly. Here's an example that does what you need:

您拥有的一种选择是实现您自己的排序功能,该功能可以正确处理您的数字。这是一个可以满足您需要的示例:

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

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

PS -- Here's the relevant documentation: http://datatables.net/development/sorting

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

回答by Michal

Technically column number two contains strings (1,000) - numbers with a comma and so does column 3 - numbers with percentages). Best thing for you to do is to pass the data to data tables as an integer (without commas and %) and write a custom formatter to add commas and percentages using mRenderoption (read about it at http://www.datatables.net/usage/columns).

从技术上讲,第二列包含字符串 (1,000) - 带逗号的数字,第 3 列也是如此 - 带百分比的数字)。您最好做的事情是将数据作为整数(不带逗号和 %)传递到数据表,并编写自定义格式化程序以使用mRender选项添加逗号和百分比(在http://www.datatables.net 上阅读)/用法/列)。

If you add custom formatting to your data also do not forget to set the option to use underlying data as your sort source rather than the displayed data.

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

回答by Oussaki

you have to define a function of sorting ( try to use sort by selection or sort by insertion ) try to stock your data variables in an array and do the caculations , else you can do the sort directly with your data

您必须定义排序函数(尝试使用按选择排序或按插入排序)尝试将数据变量存储在数组中并进行计算,否则您可以直接对数据进行排序

回答by Georges

Hello I made this using parseFloatand replace methods and using this example http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html

您好,我使用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));};

If you have 10 columns and want to sort7,8,9wich are numbers like 7,081 1,925.49use

如果您有 10 列并且想要使用sort7,8,9数字7,081 1,925.49

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