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.

Answer 1

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

Answer 2

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/