unable to sort date using data tables

manojvarma24

hi,

I am using the below plugins for date sorting in data tables but It is not sorting date instead it is remaining in ascending order and not changing. iam sorting for 3,4,5 columns.

jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
    var x, y;
   if (jQuery.trim(a) !== '') {
       var deDatea = jQuery.trim(a).split('/');
       x = (deDatea[2] + deDatea[1] + deDatea[0]) * 1;
   } else {
       x = Infinity; // = l'an 1000 ...
   }

   if (jQuery.trim(b) !== '') {
       var deDateb = jQuery.trim(b).split('/');
       y = (deDateb[2] + deDateb[1] + deDateb[0]) * 1;
   } else {
       y = Infinity;
   }
   var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
   return z;
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
     var x, y;
    if (jQuery.trim(a) !== '') {
        var deDatea = jQuery.trim(a).split('/');
        x = (deDatea[2] + deDatea[1] + deDatea[0]) * 1;
    } else {
        x = Infinity;
    }

    if (jQuery.trim(b) !== '') {
        var deDateb = jQuery.trim(b).split('/');
        y = (deDateb[2] + deDateb[1] + deDateb[0]) * 1;
    } else {
        y = Infinity;
    }
    var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
    return z;
};


    $("#ordhistTable").dataTable( {
        "bJQueryUI" : true,
        "sPaginationType" : "two_button",
        "bAutoWidth": false,
        "bLengthChange" : false,
        "bProcessing": true,
        "iDisplayLength" : 20,
        "aaSorting": [],
        "bFilter" : false,
        "aoColumns": [ 
                        { "bSearchable": false, "sType": "string" },
                        { "bSearchable": true, "sType": "string" },
                        { "sType": "us_date", },
                        {"sType": "us_date",},
                        { "sType": "us_date", },
                        { "sType": "string" },
                        { "sType": "string" },
                        { "sType": "string" },
                        { "sType": "numeric" },
                        { "sType": "string" }
                        // { "sType": "string" }
                    ]                           
    }); 
        
below is the function iam using to get dates and this function is in my .js file
function updateOrders(data) {
    var ordTbl = $('#ordhistTable').dataTable();    
    var idx = 0;
    var issuedCnt = 0;
    var countAsUnconf = 0;
    ordTbl.fnClearTable();
    if(data.orderHistoryList.length > 0) {      
        $.each(data.orderHistoryList, function() {              
            var confirmCB = "";
            if (this.isIssued == 1) {
                confirmCB = "<input name='" + this.orderId + "' type='checkbox' />";
                issuedCnt++;
            }
            if (this.countAsUnconfirmed == 1) {
                countAsUnconf++;
            }
            var orderLink = "<a href='#' onclick=\"javascript:showOrdersDetailsPopup(" + this.orderId + ",'" + this.orderStatus + 
                            "','" + this.orderNumber + "')\">" + this.orderNumber + "</a>";
            var placedDt = new Date(this.placedDate.time);
            this.placedDate = placedDt.toLocaleDateString("en-US");                         
            if (this.filledDate == null) {
                this.filledDate = "";
            } else {
                var filledDt = new Date(this.filledDate.time);
                this.filledDate = filledDt.toLocaleDateString("en-US"); 
            }                       
            if (this.confirmedDate == null) {
                this.confirmedDate = "";    
            } else {
                var confirmedDt = new Date(this.confirmedDate.time);
                this.confirmedDate = confirmedDt.toLocaleDateString("en-US");   
            }           
            ordTbl.fnAddData( [ confirmCB, orderLink, this.placedDate, this.filledDate, this.confirmedDate,  this.trackingNumber,
                                this.orderStatus, this.orderType, this.quantity, this.tsrName/*, this.userModified*/ ] );
            idx++;
        });
    }
    ordTbl.fnDraw();    
    
    if (issuedCnt > 0) {        
        $('#confirmDiv').show();
    }
    if (countAsUnconf > 0) {
        $("a[href=#orderTab]").parent().removeClass("ui-state-default").addClass("ui-state-error");
    }
    
    $(".dataTables_processing").css('visibility','hidden');
}   

Thanks in advance

manojvarma24

this is the screenshot of the table with date columns

shaneamondos

Hi, what i normally do with dates is use a hidden column with a timestamp in.

I then use that column in the table config when filtering by date with the following example:

aoColumnDefs: [
     { sTitle: "Hidden timestamp", aTargets: [0]},
     { sTitle: "First Name", aTargets: [1]},
     { sTitle: "Last Name", aTargets: [2]},
     { sTitle: "Position", aTargets: [3]},
     { sTitle: "Service", aTargets: [4]},
     { sTitle: "Type", aTargets: [5]},
     { sTitle: "Status", aTargets: [6]},
     { sTitle: "Title", aTargets: [7]},
     { sTitle: "Date", aTargets: [8]},
     { sTitle: "Time", aTargets: [9]},
     { iDataSort: 0, aTargets: [ 8 ] },
     { bVisible: false, aTargets: [0] }
],
order: [[ 0, "desc" ]],

This will use column 0 when sorting the date column and will have the table sorted by date on load. This is also good for times, is accurate to the millisecond, and doesn't need to concern date formats

allan

This plug-in is the best was of doing date and time sorting in DataTables.

Allan