jQuery - datatable plugin - sorting issue

Question

I'm using DataTables plugin from http://datatables.net.
The plugin it self is very useful,but I have a big of a problem with it.

It is return a list of address for some searches in the following format.

1 Main Street
12 Main Street
13 Main Street
14 Main Street
...
2 Main Street
3 Main Street
4 Main Street
5  Main Street
..

As you can see the sorting is not what I would expected. Will return all numbers starting with 1 eg, 11, 111, 1111 before 2.

Have any of you have some expirience with the plugin?

know to solve this sorting issue?
or know the way to disable the sorting on first initiate(display the data as it is coming form db)?

Any suggestions much appreciated.

WTK · Accepted Answer · 2011-10-03 11:02:05Z

4

To solve this particular issue you can use natural-sort plugin for datatables. Read all about it at http://datatables.net/plug-ins/sorting (search for "Natural sorting").

In short, provided you've downloaded and embedded naturalSort function, you then define sort handle for datatables like this:

jQuery.fn.dataTableExt.oSort['natural-asc']  = function(a,b) {
    return naturalSort(a,b);
};

jQuery.fn.dataTableExt.oSort['natural-desc'] = function(a,b) {
    return naturalSort(a,b) * -1;
};

You also need to specify the sSortDataType parameter for the column, to tell it which plug-in function to use (in example below I set the sorting to natural for the third column of my table):

$('#example').dataTable( {
    "aoColumns": [
        null,
        null,
        { "sType": "natural" }
]
});

Here's working fiddle http://jsfiddle.net/zhx32/14/

Note: it seems that you, in fact, number of elements on "aoColumns" have to be equal to number of columns in the table, otherwise you'll get an error. Null value indicates that datatables plugin should use default sort method for that column.

edited Oct 3, 2011 at 11:02

answered Oct 3, 2011 at 9:06

WTK

17.1k6 gold badges39 silver badges46 bronze badges

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

4 Comments

Iladarsda Over a year ago

Do I have to specify every column that I have as null - or can I just use this: "aoColumns": [ { "sSortDataType": "natural" } ] - as my natural sorting will be required in first column only?

WTK Over a year ago

I think you can get away with just defining special sort for your first column and skip the null for rest of the columns.

Iladarsda Over a year ago

I cannot get it to work. http://jsfiddle.net/MrTest/zhx32/4/ - can you have a look please and show me what I'm doing wrong?

Iladarsda Over a year ago

Thanks! Looks like null are necessary than.

Nicola Peluchetti · Accepted Answer · 2011-10-03 09:06:47Z

You should use a sorting plugin for that something like this:

jQuery.fn.dataTableExt.oSort['num-html-asc']  = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) {
    var x = a.replace( /<.*?>/g, "" );
    var y = b.replace( /<.*?>/g, "" );
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

and then specify that type in aoColumns

        "aoColumns": [
            null,
            null,
            null,
            { "sType": "num-html" },
            null
        ]

Collectives™ on Stack Overflow

jQuery - datatable plugin - sorting issue

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related