jQuery DataTables - sorting does not work when date is also a link

Question

I notices that UK date sorting does not work when a date is also a link.

Example 1. (demo)

Here the date is pure test. Works complete fine.

       <tr>
            <td>01/01/01</td>
            <td>Tarik</td>
            <td>Rashad Kidd</td>
            <td>1 34 238 6239-0509</td>
        </tr>

Example 2. (demo)

Here the date is also a link. Does not work at all. Not throwing any errors though.

         <tr>
            <td><a href="#">01/01/01</a></td>
            <td>Tarik</td>
            <td>Rashad Kidd</td>
            <td>1 34 238 6239-0509</td>
        </tr>

I also noticed that the sorting does work on any other elements even if they are a link. Only the date as a link are the issue.

I'm using the following JS code:

// UK Date Sorting
jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
}


$(document).ready(function() {

    $('#table').dataTable( {
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "aoColumnDefs" : [
            { "aTargets" : ["uk-date-column"] , "sType" : "uk_date"}
        ]
    });

});

Any help much appreciated.

Answer 1

The problem is that you sorting function is confused by the extra html. You should modify your functions like this:

// UK Date Sorting
jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {  
    //use text()
    var ukDatea = $(a).text().split('/');
    var ukDateb = $(b).text().split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    //use text()
    var ukDatea = $(a).text().split('/');
    var ukDateb = $(b).text().split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
} 

fiddle here http://jsfiddle.net/GUb2n/

Answer 2

You can try to put the date (in ISO Format) in an invisible container in front of the link:

<span style="display: none;">2001-01-01</span><a href="#">01/01/01</a>

Then alphabetic sort should work.