CODEWITHSUNDEEP
javascriptjquerysortingdatatable
Matt Stow
Matt Stow

Reputation: 6389

Custom Sorting of jQuery dataTable Columns

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.

Upvotes: 19

Views: 41590

Answers (2)

Anjani
Anjani

Reputation: 1038

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

Upvotes: 38

Lucas
Lucas

Reputation: 653

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/

Upvotes: 17

Related Questions