Problem with Sorting Date (MM/DD/YYYY) Column in HTML Table with jQuery

Question

I am using James Padolsey's jQuery sorting script for a HTML table in an ASP.NET page. I can't use other table sorting scripts due to some template restrictions.

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Here is the script that I use:

(function($){  
    $.fn.sortElements = (function(){

        var sort = [].sort;

        return function(comparator, getSortable) {

            getSortable = getSortable || function(){return this;};

            var placements = this.map(function(){

                var sortElement = getSortable.call(this),
                    parentNode = sortElement.parentNode,

                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

                return function() {

                    if (parentNode === this) {
                        throw new Error(
                            "You can't sort elements if any one is a descendant of another."
                        );
                    }

                    // Insert before flag:
                    parentNode.insertBefore(this, nextSibling);
                    // Remove flag:
                    parentNode.removeChild(nextSibling);

                };

            });

            return sort.call(this, comparator).each(function(i){
                placements[i].call(getSortable.call(this));
            });

        };

    })();

    $.fn.tablesort = (function(options) {
        return this.each(function() {  
            var table = $(this);
            $(this).find('thead th').wrapInner('<a href="#"/>').find('a').click(function(){
              var sort = $(this).data('sort');
              $(this).parents('thead').find('a').removeClass('sort-asc sort-desc');
              sort = (sort=='asc'? 'desc' : (sort=='desc'? 'asc' : 'asc'));
              $(this).data('sort', sort).addClass('sort-'+sort);
              table.find('tbody tr td').removeClass('column-selected');
              table.find('tbody tr td:nth-child('+($(this).parent().index()+1)+')').sortElements(
                function(a, b){
                    return sort=='desc'? ($(a).text() < $(b).text()) - ($(a).text() > $(b).text()) : ($(a).text() > $(b).text()) - ($(a).text() < $(b).text());
                },
                function(){
                    return this.parentNode; 
                }
              ).addClass('column-selected');
              return false;
            });
            return $(this);
        });
    });

})(jQuery);

And, here is the simplified table code:

<table class="datatable paginate sortable full">
<thead>
<tr>
<th>Product Name</th>
<th>Product Type</th>
<th>Assembled On</th>
</tr>
</thead>
<tbody>
<tr>
<td>
...
</td>
</tr>
</table>

The first two columns are being sorted correctly, but the 3rd column isn't sorting properly.

3rd column is a date field and the format is MM/DD/YYYY (like 3/12/2009 and 3/9/2009).

In the table, proper sorting should be like 2/21/2009, 3/9/2009 and 3/12/2009; but the current script makes it: 2/21/2009, 3/12/2009 and 3/9/2009.

I tried adding some parsers without any success. How can I fix this issue?

PS: I am not a jQuery expert.

Thank you for all of the help.

Answer 1

It looks like your sort comes out alphabetically, instead of numerically (or alphanumerically).

As far as I can see, you are sorting the dates as a whole, and I'm guessing the slashes is making JS sort alphabetically.

If you split the dates up, and sort on day, month and year separately, it should work better.

I haven't tried amit_g's solution. It probably works fine. I just wanted to explain what I think is the reason that your code didn't do what you expected... :)

Answer 2

Add a class to designate a column as a date ...

<table class="datatable paginate sortable full">
<thead>
<tr>
<th>Product Name</th>
<th>Product Type</th>
<th class="date">Assembled On</th> <!-- added a class="date" to mark this col as date -->
</tr>
</thead>

then alter the function a little bit to

$.fn.tablesort = (function(options) {
    return this.each(function() {  
        var table = $(this);
        $(this).find('thead th').wrapInner('<a href="#"/>').find('a').click(function(){
          var sort = $(this).data('sort');
          var isColDate = $(this).parent().hasClass("date");

          $(this).parents('thead').find('a').removeClass('sort-asc sort-desc');
          sort = (sort=='asc'? 'desc' : (sort=='desc'? 'asc' : 'asc'));
          $(this).data('sort', sort).addClass('sort-'+sort);
          table.find('tbody tr td').removeClass('column-selected');
          table.find('tbody tr td:nth-child('+($(this).parent().index()+1)+')').sort(
            function(a, b){

                if (isColDate) {
                    a = new Date($(a).text());
                    b = new Date($(b).text());
                }
                else {
                    a = $(a).text();
                    b = $(b).text();
                }

                return sort=='desc'? (a < b) : (a > b);
            },
            function(){
                return this.parentNode; 
            }
          ).addClass('column-selected');
          return false;
        });
        return $(this);
    });
});