使用J-query数据表,美国日期格式的自定义排序不起作用

Custom sort for US date format is not working using J-query datatable

本文关键字:自定义 排序 不起作用 格式 日期 J-query 数据表 美国 使用      更新时间:2023-09-26

jquery数据表排序问题:嗨,我正在使用下面的代码对表列中的美国日期进行排序,但它不起作用。。。

jQuery.fn.dataTableExt.oSort['custom_us_date-asc'] = function(x, y) {
    var xVal = getCustomEuroDateValue(x);
    var yVal = getCustomEuroDateValue(y);
    if (xVal < yVal) {
        return -1;
    } else if (xVal > yVal) {
        return 1;
    } else {
        return 0;
    }
}
jQuery.fn.dataTableExt.oSort['custom_us_date-desc'] = function(x, y) {
    var xVal = getCustomEuroDateValue(x);
    var yVal = getCustomEuroDateValue(y);
    if (xVal < yVal) {
        return 1;
    } else if (xVal > yVal) {
        return -1;
    } else {
        return 0;
    }
}

    function getCustomEuroDateValue(strDate) {
    var frDatea = $.trim(strDate).split(' ');
    var frTimea = frDatea[1].split(':');
    var frDatea2 = frDatea[0].split('/');
    var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1]);
    x = x * 1;
    return x;
}

function tableDef(){
     oTable = j$('#example').dataTable({
            "bPaginate":false,
            "bJQueryUI": true,         
            "aoColumns": [
                null,
                null,
                null,
                {"stype" :"custom_us_date",
                    "fnRender" : function(obj, val)
                {
                    if(j$(val).text() != '')
                    {
                        var d = new Date(j$(val).text());
                        var month = d.getMonth() + 1;
                        var sMonth = '';
                        if(month < 10) sMonth = '0' + month; else sMonth =                       month;
                        var day = d.getDate();
                        var sDay = '';
                        if(day < 10) sDay = '0' + day; else sDay = day;
                        var sYear = d.getFullYear();
                        var hour = d.getHours();
                        var sHour = '';
                        if(hour < 10) sHour = '0' + hour; else sHour = hour;
                        var minute = d.getMinutes();
                        var sMinute = '';
                        if(minute < 10) sMinute = '0' + minute; else sMinute =                        minute;
                        var finalString = sMonth + '/' + sDay + '/' + sYear  + ' ' + sHour + ':' + sMinute;
                         return finalString;
                                }

但它没有进行自定义排序(日期),只是进行字符串排序。它根本没有考虑对日期进行自定义排序。我将日期格式化为fnRender到US日期格式,然后使用sType将值返回到自定义排序函数。

我是j-query的新手,如果你能更新我的代码,我将不胜感激。。。。

谢谢你的光临。。。。

嘿,我尝试对我的代码进行一些自定义,希望这能帮助你:

$.extend(jQuery.fn.dataTableExt.oSort, {
"date-custom-pre": function(a) {
var x;
try {
    var dateA = a.replace(/ /g, '').split("-");
    var Datetime = a.replace(/ /g, '').split(",");
    var timeA = Datetime[1];//time hour:minute
    var timeB = timeA.replace(/ /g, '').split(":");// split hour & minute
    var hour = timeB[0];
    var minute = timeB[1].replace(/'D/g, '');// remove string after "hour:minute"
    var day = parseInt(dateA[0], 10);
    var month = parseInt(dateA[1], 10);
    var year = parseInt(dateA[2], 10);
    var date = new Date(year, month - 1, day, hour, minute);
    x = date.getTime();
}
catch (err) {
    x = new Date().getTime();
}
return x;
},
   "date-custom-asc": function(a, b) {
    return a - b;
},
   "date-custom-desc": function(a, b) {
    return b - a;
}});

如何使用:

$('#table').DataTable({
"aaData": data,
"order": [[0, "desc"]], //default sort column on first page loaded
"aoColumnDefs": [
    { sType: "date-custom", aTargets: [0] } //based on your date column
],
"aoColumns": [
    {"mDataProp": "date_save"
        ,"mRender": function(data, type, full)
        {
            var getData = new Date(data);
            var month = getData.getMonth() + 1;
            var date = getData.getDate();
            var year = getData.getFullYear();
            var hour = getData.getHours();
            var minute = getData.getMinutes();
            return (date > 9 ? date : "0" + date) + "-" +
                   (month > 9 ? month : "0" + month) + "-" + 
                   year + 
                   ", " + 
                   (hour > 9 ? hour : "0" + hour) + ":" +
                   (minute > 9 ? minute : "0" + minute);
        }
    },
    {"mDataProp": "source_page"},
    {"mDataProp": "sub_status"}
]});

它将显示这样的日期格式:

15-12-2016, 12:33 -> (dd-mm-yyyy, hh:mm)