How to sort on a numeric column in jQuery DataTables

datatables, html, javascript, jquery

Solution

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

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

Problem

(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: ``` 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.

Original source