jQuery dates not sort sorting properly and li element jumps when button is pressed

Question

I've managed to figure out how to sort my dates in jQuery but it came to my attention that certain dates are not being sorted correctly and there is an little jump when one of the buttons are pressed. How can I resolve this? I've posted up my code at http://jsfiddle.net/Erah9/1/. Here is my code so far:

HTML

<div style="padding-top: 20px;">
<input class="btn" type="button" value="Oldest First" id="sortAsc"/>
<input class="btn" type="button" value="Newest First" id="sortDesc"/>
</div>

<div id="wrapper" style="padding-top: 20px">
        <ul>
        <li class='item'><div class='activity_date'>01/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Allocated request</div>
        </div></li><li class='item'><div class='activity_date'>03/10/2012</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>Failed request</div>
        </div></li><li class='item'><div class='activity_date'>08/10/2012</div>

        <!---------------- 
        SEE JS FIDDLE FOR MORE OF THIS
        ----------------->        

        </li>          
        </ul>
</div>

JS

   $(function(){ 
    var itemsArray = $('li.item');
    itemsArray.sort(function(a,b){
        var aTime = new Date($(a).find('.activity_date').text()).getTime();
        var bTime = new Date($(b).find('.activity_date').text()).getTime();
        return aTime - bTime;
    });

    $('#sortAsc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").append($(this));
        });
    });
    });

Thank you so much! in advance

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

you're adding <li> items without encapsulating them in a <ul>. Unordered lists have a default margin which is shown at first, but that margin is discarded once you empty the wrapper div and only add single <li> items.

I've update your fiddle so that it first creates the <ul> and then adds the <li> items to it: http://jsfiddle.net/Erah9/5/

As for the sorting: I think somehow the day and month of the dates are getting mixed up. I've fiddled around and got it working (so it seems), with the help of this SO issue too

http://jsfiddle.net/Erah9/10/

edited May 23 '17 at 10:24

Community

1
1

answered Nov 08 '12 at 11:20

Reinder Wit

6,490
1
25
36

thanks for your reply. It has removed the "jumping" but the sorting itself seems to stop working after I first press it. Not sure why when it works well on jQuery. Could it be because I'm working on a dynamic solution? Here is my code so far: http://pastebin.com/prtDqfx4. The JavaScript and CSS remain unchanged. – methuselah Nov 08 '12 at 11:37
have you tried to swap the day and month of the date in you server-side PHP code? I think you're mixing them up and the javascript is taking the day as the month and vice-versa – Reinder Wit Nov 08 '12 at 12:32

score 1 · Answer 2 · edited May 23 '17 at 12:18

You are not parsing the date correctly, you should use for example following function:

// parse a date in dd/mm/yyyy
function parseDate(input) {
   var parts = input.match(/(\d+)/g);
   // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
   return new Date(parts[2], parts[1]-1, parts[0]); // months are 0-based
}

Additionally your sort function can be parameterized, for example:

function sort(items, order)
{
    return items.sort(function(a,b){
        var ret = parseDate($(a).find('.activity_date').text()) > parseDate($(b).find('.activity_date').text());
        return (order == "asc") ? ret : !ret;
    });
}

and the usage can be following:

sort($('li.item'), "desc").each(function(){
    // make some use of the elements sorted in descending order
});

Besides your html contains errors, for example do not use the same id's on many elements.

jQuery dates not sort sorting properly and li element jumps when button is pressed

2 Answers2