Sorting Glitch in v1.7.4 -- Possible Bug?

Sorting Glitch in v1.7.4 -- Possible Bug?

elite-robelite-rob Posts: 26Questions: 0Answers: 0
edited December 2010 in General
Hello All,

I've been using DataTables for a while now and it's amazing. I almost never have a problem with it.

But, my QA Team just found a pretty odd bug. I've been poking and prodding and can't figure out if I've stumbled upon a bug in v1.7.4 (in which case I'm happy to find it so we can make this great script even better!) or if I am just doing something wrong.

If you download the HTML file linked below, you will see it creates a 3 column table. The third column, titled "Created", has a date, time and last modified value. The values in the table are:
12/13/2010 5:12:47 AM
5/26/2010 6:36:04 AM
5/26/2010 6:35:44 AM

When the table first loads, there is no sorting applied, and the "12/13/2010 5:12:47 AM" value appears first.

The bug appears when you start toggling the sort order in the "Created" column.
As you change the sort between ascending and descending, you would expect the "12/13/2010 5:12:47 AM" would appear at the top when things are descending order.

But, as you toggle the sort order, the "12/13/2010 5:12:47 AM" value stays in the middle.

This doesn't make any sense to me at all?

Any ideas?

Download Link: http://www.4shared.com/document/nf4pLP0s/dataTables_bug.html
(I tried to just include the code here, but it was too many characters.)

Replies

  • 28.vivek.s28.vivek.s Posts: 69Questions: 0Answers: 0
    hi elite-rob,

    While defining your table in document.ready..you can specify the sorting type.....for ex...
    it can be date wise or string or..etc...try something like this...
    [code]
    $(document).ready(function() {
    oTable = jQuery('#CacheSearchResultsTable').dataTable(
    "aoColumns": [
    { "sType": "html" },
    null,
    { "sType": "date"},
    ]
    });
    [/code]
  • allanallan Posts: 63,512Questions: 1Answers: 10,472 Site admin
    The issue here is that the date string you have can't be parsed by Javascript's Date.parse() which DataTables uses for date sorting. There are a couple of date sorting plug-ins which you can use to get the correct sorting (although I think you'll need to modify some since none of them are a perfect match for your date string): http://datatables.net/plug-ins/sorting . Another option is to use the hidden title numeric sorting which will sort on a unixtime stamp in the title attribute of an empty span element - quite useful for supporting many different date formats.

    Allan
  • elite-robelite-rob Posts: 26Questions: 0Answers: 0
    Hi Allan,

    Thank you so much for the reply. As always, I greatly appreciate your help.... you're the best!

    I did see that none of the sorting plug-ins match my date format.

    Unfortunately, my JS skills are not good (almost non-existant), so I can't figure out how to modify any of the plug-ins to work with a different date structure. One of them is really close but not an exact match.

    I don't want to seem overly needy (I really don't!), but I would imagine a lot of people use the date format:
    MM/DD/YYYY hh:mm:ss

    It would be great for me and anyone in the future if there was a plug-in that could handle that format.

    Since I could figure out how to get that to work, I switched to your other suggestion and attempted to get the 'hidden title numeric sorting' to work with a unixt timestamp.

    Although, I think I setup everything correctly, it still isn't working. I'm not sure if this is a bug or if I'm doing something wrong.

    I have this at the top of my file:

    [code]

    <!-- DataTables jQuery Begin -->

    $(document).ready(function(){

    jQuery.fn.dataTableExt.oSort['title-numeric-asc'] = function(a,b) {
    var x = a.match(/title="*(-?[0-9]+)/)[1];
    var y = b.match(/title="*(-?[0-9]+)/)[1];
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };

    jQuery.fn.dataTableExt.oSort['title-numeric-desc'] = function(a,b) {
    var x = a.match(/title="*(-?[0-9]+)/)[1];
    var y = b.match(/title="*(-?[0-9]+)/)[1];
    x = parseFloat( x );
    y = parseFloat( y );
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };

    var oTable = $('#ctl00_ContentPlaceHolder1_gvMySurvey').dataTable({
    "aoColumns": [
    { "sType": "html" },
    null,
    { "sType": "html" }
    ],
    "bJQueryUI": false,
    "sPaginationType": "full_numbers",
    "aaSorting": [ ] // Prevents initial sorting
    });

    });

    [/code]

    Then, in the column that I am sorting I put a span with a title that has the unix timestamp.

    1274873744 = 5/26/2010 6:35
    1274873764 = 5/26/2010 6:36
    1292238767 = 12/13/2010 5:12

    So, for example, it looks like this:

    [code]


    12/13/2010 5:12:47 AM

    [Modified:13 hours ago]

    [/code]

    Even with all that, when I toggle the sort order it does not work.

    The two sort orders it generates are:

    12/13/2010 5:12:47 AM
    5/26/2010 6:35:44 AM
    5/26/2010 6:36:04 AM

    AND

    5/26/2010 6:36:04 AM
    5/26/2010 6:35:44 AM
    12/13/2010 5:12:47 AM

    If you look closely you can see that is not right. The times 6:35 and 6:36 are always in the wrong order.

    Any ideas?

    Thanks!

    Download Link: http://www.4shared.com/document/aBKt75dy/dataTables_bug_V2.html
  • allanallan Posts: 63,512Questions: 1Answers: 10,472 Site admin
    You need to set the sType for the columns where you have the hidden title to 'title-numeric'. Otherwise DataTables will just use string sorting - which will cause the issue.

    Allan
  • elite-robelite-rob Posts: 26Questions: 0Answers: 0
    Allan... you are brilliant!

    Changing the sType to 'title-numeric' seems to have done the trick.

    Now all we have to do is figure out how to get our application to include the unixtime stamp on the screen.

    I'll start another thread about the sorting plug-in for "MM/DD/YYYY hh:mm:ss" just in case anyone with far greater skills than I have, wants to take a crack at it.

    Thank you so much for your help.
This discussion has been closed.