jquery datatable date sorting issue

Question

I am using datatable plugin version 1.8.2 for displaying table on my webpage.

It is working fine except. It is not sorting dates properly, it is showing "invalid date" in Date object. below is my code snippet.

     $(document).ready(function() {

                jQuery.fn.dataTableExt.oSort['usdate-asc']  = function(a,b) {
    /*
    a and b are <div> tag with date
    */
                    var texta = ($(a).text()).toString(); // Here I am able to see my date in ' 03-17-2015 12:25:21 AM ' format
                    var textb = ($(b).text()).toString();// Here I am able to see my date in ' 03-17-2015 12:25:21 AM ' format

                    var usDatea = new Date(Date.parse(texta)); // Here it is showing "invalid date"
                    var usDateb = new Date(Date.parse(textb)); 

                    return ((usDatea < usDateb) ? -1 : ((usDatea > usDateb) ?  1 : 0));
                };

                jQuery.fn.dataTableExt.oSort['usdate-desc'] = function(a,b) {
 /*
    a and b are <div> tag with date
    */
                    var texta = ($(a).text()).toString(); //same as above
                    var textb = ($(b).text()).toString(); //same as above

                    var usDatea = new Date(Date.parse(texta));  //same as above
                    var usDateb = new Date(Date.parse(textb));  //same as above

                    return ((usDatea < usDateb) ? 1 : ((usDatea > usDateb) ?  -1 : 0));
                };

                $('#tablegridname').dataTable( {
                    "sPaginationType": 'full_numbers',
                    "bJQueryUI": true,
                    "iDisplayLength": 50,
                    "aLengthMenu":[50,100,500,1000],
                    "aaSorting": [[ 4, 'desc' ]],
                    "aoColumns": [null, null, null, null, {"sType": "usdate"}]
                } );

            });
            });

How does the dates look like? It sounds like you are having some dates in a format Data.parse() not can recognise. BTW - you should really consider upgading your version of datatables to at least a version 1.9.4. — davidkonrad
– davidkonrad, Commented Apr 1, 2015 at 12:34
Your problem is your date (03-17-2015 12:25:21 AM) is not in an accepted format. What behavior do you expect when your date is 01-02-2015? January 2nd (American) or February 1st (most of the world)? Look here and try to get your date in that format: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Bumptious Q Bangwhistle
– Bumptious Q Bangwhistle, Commented Apr 1, 2015 at 16:13
@davidkonrad I can not do it. because everything is working fine except date sorting and Client won't except it :( — user3035305
– user3035305, Commented Apr 1, 2015 at 17:45
@BumptiousQBangwhistle it is NOT about Date.parse() method. It is about, I have date in this 03-17-2015 12:25:21 AM format and I want to create a date object with this value so that I can compare it. how can I do it? with or without Date.parse() — user3035305
– user3035305, Commented Apr 1, 2015 at 17:48
It is about Date.parse. Your date is in a wrong format. You can't use Date.parse AND that date format. One must go. — Bumptious Q Bangwhistle
– Bumptious Q Bangwhistle, Commented Apr 1, 2015 at 18:03

Bumptious Q Bangwhistle · Accepted Answer · 2017-12-02 22:29:28Z

Try this fiddle:

http://jsfiddle.net/82vh6mp2/

It uses this simple function:

    function parseDateForSort(d)
    {
       return d.substring(6,10) + d.substring(0,2) + 
          d.substring(3,5) + d.substring(20) + 
          d.substring(11,19);
    }

The function takes advantage of the fact that, luckily, PM comes after AM alphabetically; hence the "d.substring(20)" in the middle of the string. So we have YYYYMMDD[AM or PM]HH:MM:SS.

In your code you can get rid of Date.parse, and replace your return with:

  usDatea = parseDateForSort(texta);
  usDateb = parseDateForSort(textb);

  return ((usDatea < usDateb) ? -1 : ((usDatea > usDateb) ?  1 : 0));

Good luck.

Addendum:

You can create your own sort type, and then specify the column thusly:

$.extend($.fn.dataTableExt.oSort, {
    "date-us-pre": function (v) {
        return parseDateForSort(v);
    },

    "date-us-asc": function ( a, b ) { return a - b; },
    "date-us-desc": function ( a, b ) { return b - a; }
} );

And then in your .dataTable call include "aoColumnDefs": [ { "sType":"date-us", "aTargets":[6] } ]

or whatever column number it is instead of 6.

Collectives™ on Stack Overflow

jquery datatable date sorting issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related