jquery datatables column not sorting properly

Question

I think I know the issue with this, but I do not know how to approach it properly so I am hoping someone here has had a similar issue and managed to fix it some how. What I have is a table with a few columns all of which work as far as sorting goes except one. below is a screen capture of that column and its sorting at work.

enter image description here

as you can see it does not sort according to alpha-numeric logic. My assumption is that some of the names have characters in them such as comma's parentheses, brackets, and so on. So that said, how would I tackle this issue so I can sort this alpha-numericly using the datatables plugin? Idea's?

****EDIT****

This is the code I am working with, works for everything but this one column..

jQuery.fn.dataTableExt.oSort['num-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-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));
};

$(document).ready(function() {
    $('#ledger').dataTable({
        bAutoWidth: false,
        bJQueryUI : true,
        bProcessing: true,
        bServerSide: false,
        sPaginationType: "full_numbers",
        bStateSave : false,
        bUseRendered: false,
        iDisplayLength: ${entriesValue},
        sDom: mw.superadmin.datatable.relatedListDom,
        aLengthMenu: mw.superadmin.datatable.relatedListLengthMenu,
        aaSorting: [[0,'asc']],
        aoColumns: [
            null,
            { "iDataSort": 2},
            { "bVisible": false, "sType": "num"},
            { "iDataSort": 4, "bSortable": true },
            { "bVisible": false, "sType": "num"}
        ]
    });

Mike Robinson · Accepted Answer · 2012-04-18 21:59:46Z

3

Since you're showing a link, I'm guessing you're using a custom render function?

If that's the case, in your column definition set the following:

"bUseRendered": false

That'll make the table sort on the data, and not the rendered output.

answered Apr 18, 2012 at 21:59

Mike Robinson

25.2k8 gold badges64 silver badges83 bronze badges

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

4 Comments

chris Over a year ago

this didn't make a difference

Mike Robinson Over a year ago

Did you use it in the column definition? In your example it's in the datatable definition, and that's the wrong place.

chris Over a year ago

not entirely sure, unfortunatley ive done very little work with datatables up to this point and it was essentially thrown at me with force to work with it, i put my code above if that helps any to decphire what ive done wrong

chris Over a year ago

I failed to mention this seems to be only an issue on Chrome browsers, FF, IE, Safari, and Opera all seem fine. This is something specific to Chrome

deusxmach1na · Accepted Answer · 2012-04-18 22:01:42Z

3

I believe the best way is to use aoColumnDefs. Try this:

"aoColumnDefs": [
   {
   "sType": "string"
   }
]

If that doesn't work you may need to create a custom sorting function. See this link.

answered Apr 18, 2012 at 22:01

deusxmach1na

3787 silver badges18 bronze badges

3 Comments

chris Over a year ago

unfortunately that didnt help

deusxmach1na Over a year ago

Maybe try adding an sType of string to the first column in aoColumns. Instead of null, use {"sType": "string"}. Also you may want to look at some of the documentation for iDataSort since you have hidden columns that are used for sorting.

chris Over a year ago

I failed to mention this seems to be only an issue on Chrome browsers, FF, IE, Safari, and Opera all seem fine. This is something specific to Chrome

Karthikeyan · Accepted Answer · 2016-11-30 07:16:53Z

0

If you are using custom render method, use the value of "type" to argument differentiate the actual data and your custom view.. Like below,

"render": function ( data, type, full, meta ) {
    if ( type === 'display' ) {
        return '<a class="btn btn-link">' + full['description'] + '</a>';                       
    }
    return full['description'];
}

Internally the data-table will pass type as "display" while generating view and other values when doing sorting, searching.... etc

answered Nov 30, 2016 at 7:16

Karthikeyan

4143 silver badges16 bronze badges

Comments

Colin · Accepted Answer · 2017-05-06 19:13:02Z

0

In my case my first column contained images, I discovered that sorting that column was sorting the second column correctly, but when I clicked to sort the second column it was sorting incorrectly. I fixed this by disabling the first column via 'aTargets' and setting 'sType' as 'null':

    "aoColumnDefs": [
        { 'bSortable': true, 'sType':"null", 'aTargets': [1, 6] },
    ]

answered May 6, 2017 at 19:13

Colin

1,8661 gold badge21 silver badges25 bronze badges

Collectives™ on Stack Overflow

jquery datatables column not sorting properly

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related