CODEWITHSUNDEEP
jquerysortingdatatables
chris
chris

Reputation: 36937

jquery datatables column not sorting properly

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"}
        ]
    });

Upvotes: 4

Views: 19273

Answers (4)

Colin
Colin

Reputation: 1836

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] },
    ]

Upvotes: 0

Karthikeyan
Karthikeyan

Reputation: 414

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

Upvotes: 0

deusxmach1na
deusxmach1na

Reputation: 368

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.

Upvotes: 3

Mike Robinson
Mike Robinson

Reputation: 25159

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.

Upvotes: 3

Related Questions