Date sorting working on IE but not firefox

Date sorting working on IE but not firefox

abathgateabathgate Posts: 4Questions: 0Answers: 0
edited July 2009 in General
In IE date sort works but in firefox, nothing happens. Any clues?

/* Init the table */
oTable = $('#example').dataTable({
"bPaginate": false,
"bFilter": false,
"bInfo": false,
"aoColumns": [{ "bSortable": false }, null, null, { "sType": "date" }, null, null],
"bSearchable" : false }
);

Replies

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Hi abathgate,

    Date sorting is a fairly common question, and it might we worth having a look through some of the old forum threads about this - for example:

    http://datatables.net/forums/comments.php?DiscussionID=346
    http://datatables.net/forums/comments.php?DiscussionID=303
    http://datatables.net/forums/comments.php?DiscussionID=223

    Long and short of it is that Date.parse() can have different behaviour in each browser, and it is sometimes best to have your own plug-in sorting function.

    Regards,
    Allan
  • abathgateabathgate Posts: 4Questions: 0Answers: 0
    edited July 2009
    Thanks, Allan I finally made it work. I thought it might be useful to post my full solution so here it is...

    [code]
    function isIE()
    {
    return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
    }

    jQuery.fn.dataTableExt.oSort['title-date-asc'] = function(x,y) {
    var ax = x.split("-");
    var a = ( ax[2]+ax[1]+ax[0] ) * 1;
    var by = y.split("-");
    var b = ( by[2]+by[1]+by[0] ) * 1;
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['title-date-desc'] = function(y,x) {
    var ax = x.split("-");
    var a = ( ax[2]+ax[1]+ax[0] ) * 1;
    var by = y.split("-");
    var b = ( by[2]+by[1]+by[0] ) * 1;
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    };
    [/code]
    ... And in the function that initiates the dataTable...

    [code]
    if (isIE()) {
    oTable = $('#example').dataTable({
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "sZeroRecords": "No reviews retrieved",
    "aaSorting": [ [0,'asc'], [1,'asc'] ],
    "aoColumns": [{ "bSortable": false }, null, { "bSortable": false }, { "sType": 'date' }, null, null],
    "bSearchable" : false
    });
    } else {
    oTable = $('#example').dataTable({
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "sZeroRecords": "No reviews retrieved",
    "aaSorting": [ [0,'asc'], [1,'asc'] ],
    "aoColumns": [{ "bSortable": false }, null, { "bSortable": false }, { "sType": 'title-date' }, null, null],
    "bSearchable" : false
    });
    }
    [/code]
    *Edited by Allan to add code highlighting - 14-7-09
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Hi abathgate,

    Thanks very much for sharing your code with us! One thing you might want to do to make it more maintainable is have only one initialisation of DataTables, which will be possible by setting a variable something like this:

    [code]
    var sDateType = isIE() ? "date" : "title-date";
    oTable = $('#example').dataTable({
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "sZeroRecords": "No reviews retrieved",
    "aaSorting": [ [0,'asc'], [1,'asc'] ],
    "aoColumns": [{ "bSortable": false }, null, { "bSortable": false }, { "sType": sDateType }, null, null],
    "bSearchable" : false
    });
    [/code]

    One other thing I've just noticed - the sZeroRecords statement has no effect. sZeroRecords needs to be given as part of the oLanguage object: http://datatables.net/usage#oLanguage.sZeroRecords .

    Regards,
    Allan
  • dizlexikdizlexik Posts: 2Questions: 0Answers: 0
    I have been having an issue where all fields are automatically detected as dates.
    The problem is that Date.parse is returning null, making isNaN return false.
    I edited the type detector as follows and it's working fine now.

    [code]
    function ( sData )
    {
    var date = Date.parse(sData);
    if ( date !== null && !isNaN(date) )
    {
    return 'date';
    }
    return null;
    }
    [/code]
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Hi dizlexik,

    That's very interesting! Could I ask what browser you are using? I've not come across this problem before and it actually sounds a bit like a browser bug... If you pass 'null' to isNaN() - I'd expect it to return true! null is not a number - therefore 'true' seems the correct response.

    What I am guessing is happening is that the browser casts null (i.e. 0x0) to a number, which is '0' and therefore thinks it is a number! I'm still of the opinion this is a browser bug, but I've just your fix into my development version of DataTables and I'll include it in the next release - thanks for posting about this (and including the fix ;-) )!

    Regards,
    Allan
  • dizlexikdizlexik Posts: 2Questions: 0Answers: 0
    Hey Allan,

    You're right about it being a browser issue. It was always working correctly in IE. The problem was with Firefox 3.5.
    When I was getting this issue, I came across this article about the isNaN(null) issue: http://stackoverflow.com/questions/115548/why-is-isnannull-false-in-js
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Hi dizlexik,

    Good stuff - thanks for the link! MDC confirms that it's a casting issue then :-). Not to surprising really when you think in those terms, but annoying that the browsers have different behaviour! The fix will be in 1.5.1 :-)

    Regards,
    Allan
  • denisforigodenisforigo Posts: 11Questions: 0Answers: 0
    edited January 2010
    _
This discussion has been closed.