Custom Sorting of jQuery dataTable Columns

Question

I have a table which contains columns of numbers and NA.

<tr>
    <td>NA</td>
</tr>
<tr>
    <td>1024</td>
</tr>
<tr>
    <td>100</td>
</tr>
<tr>
    <td>200</td>
</tr>
<tr>
    <td>300</td>
</tr>
<tr>
    <td>2096</td>
</tr>

I'm trying to use jQuery dataTable to sort the column to produce the following:

NA, 100, 200, 300, 1024, 2096 and 2096, 1024, 300, 200, 100, NA

but can't figure out how to do it from reading the sorting and plugins docs.

I've created a Fiddle of the code here: http://jsfiddle.net/stowball/rYtxh/ and would really appreciate some assistance.

if you use "-" instead of "NA" it works fine here is js fiddle http://jsfiddle.net/stowball/rYtxh/ — Umesh Panchani, Jul 23 '13 at 10:23
@umesh25 Thanks, that's really interesting! If I don't get any other solutions, I may have to do that. — Matt Stow, Jul 23 '13 at 10:30

score 38 · Answer 1 · edited May 19 '18 at 22:15

38

Simply use data-order attribute in <td> element. Plugin will sort based on that. For your case the HTML will be:

<tr>
    <td data-order="-1">NA</td>
</tr>
<tr>
    <td data-order="1024">1024</td>
</tr>
<tr>
    <td data-order="100">100</td>
</tr>
<tr>
    <td data-order="200">200</td>
</tr>
<tr>
    <td data-order="300">300</td>
</tr>
<tr>
    <td data-order="2096">2096</td>
</tr>

More HTML5 attributes are available to solve problems of filtering, sorting, searching, etc.

https://datatables.net/examples/advanced_init/html5-data-attributes.html

edited May 19 '18 at 22:15

Aziz Saleh

2,687
1
17
27

answered Apr 10 '17 at 07:19

Anjani

997
1
7
9

1

the answer is helpful, the position of the quotes are wrong. – Ken Nov 21 '17 at 14:38
Thanks @Ken for highlighting – Anjani May 07 '19 at 12:52
Thanks @Aziz Saleh for the Edit – Anjani May 07 '19 at 12:53

score 17 · Accepted Answer · edited Dec 16 '16 at 10:55

By looking at the Numbers with HTML plugin you can take the existing code and modify the regex to look for negative numbers instead of stripping everything. Using that you can put together a HTML tag around the "NA" and use the HTML5 data-internalid to store the lowest number of the collection.

so it becomes:

<td><a data-internalid="-1">NA</a></td>

and (notice the regex)

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"num-html-pre": function ( a ) {
    var x = String(a).replace(/(?!^-)[^0-9.]/g, "");
    return parseFloat( x );
},

"num-html-asc": function ( a, b ) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"num-html-desc": function ( a, b ) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}});

Then in the datatable, set the type to num-html

$('table').dataTable({
    "aoColumns": [{ "sType": "num-html" }],
    "aaSorting": [[ 0, "desc" ]],
});

You can see my full solution here: http://jsfiddle.net/rYtxh/4/

Custom Sorting of jQuery dataTable Columns

2 Answers2

Linked