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 jsfiddle.net/stowball/rYtxh — Umesh Panchani
– Umesh Panchani, Commented Jul 23, 2013 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
– Matt Stow, Commented Jul 23, 2013 at 10:30

Aziz Saleh · Accepted Answer · 2018-05-19 22:15:14Z

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, 2018 at 22:15

Aziz Saleh

2,7071 gold badge19 silver badges27 bronze badges

answered Apr 10, 2017 at 7:19

Anjani

1,0581 gold badge9 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ken Over a year ago

the answer is helpful, the position of the quotes are wrong.

Anjani Over a year ago

Thanks @Ken for highlighting

Anjani Over a year ago

Thanks @Aziz Saleh for the Edit

Rajshekar Reddy · Accepted Answer · 2016-12-16 10:55:56Z

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/

Collectives™ on Stack Overflow

Custom Sorting of jQuery dataTable Columns

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related