数据表:日期排序不工作的Firefox和IE(DataTables: Date Sorting no

2019-10-18 21:47发布

我有一个日期列在这个2级的浏览器排序问题,在镀铬的正常工作。

我想不出可以在看什么,希望有人能帮助我。

我使用的格式为(月名年)2013例>十月

的代码:(包含日期列是数字2)

   <script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('#resultados').dataTable( {
        "sPaginationType": "full_numbers",
aaSorting: [] ,
        "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1,4 ] },

       ],
        "aLengthMenu": [[25, 50, 75, 100], [25, 50, 75, 100]],
        "iDisplayLength": 100
    } );
} );

</script>

提前致谢。

Answer 1:

不知道FF,但老IE可能无法在冗余的情况下,

因此,尝试下面的代码:

$(document).ready(function () {
    $('#resultados').dataTable({
        "sPaginationType": "full_numbers",
        aaSorting: [],
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets': [ 1, 4 ] }
        ],
        "aLengthMenu": [[25, 50, 75, 100], [25, 50, 75, 100]],
        "iDisplayLength": 100
    });
});

没JSLint的给它的冗余去除, (后[ 1,4 ] }



Answer 2:

原来, Date.parse()在IE和FF实现不正确地解释这些字符串,而Chrome呢!

我创建了一个插件来得到这个工作(note--我已经把拉请求在GitHub上得到它为未来的主要回购):

/**
 * This sorting plug-in will sort, in calendar order, data which
 * is in the format "MMMM yyyy". Inspired by forum discussion:
 * http://datatables.net/forums/discussion/1242/sorting-dates-with-only-month-and-year
 *
 *  @name Date (MMMM yyyy)
 *  @anchor Sort dates in the format `MMMM yyyy`
 *  @author Phil Hurwitz
 *
 *  @example
 *    $('#example').dataTable( {
 *       columnDefs: [
 *         { type: 'stringMonthYear', targets: 0 }
 *       ]
 *    } );
 */

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "stringMonthYear-pre": function (s) {
        var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

        var dateComponents = s.split(" ");
        dateComponents[0] = dateComponents[0].replace(",", "");
        dateComponents[1] = jQuery.trim(dateComponents[1]);

        var year = dateComponents[1];

        var month = 0;
        for (var i = 0; i < months.length; i++) {
            if (months[i].toLowerCase() == dateComponents[0].toLowerCase()) {
                month = i;
                break;
            }
        }

        return new Date(year, month, 1);
    },

    "stringMonthYear-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "stringMonthYear-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});


Answer 3:

    Data table support by default "YYYY-MM-DD" so to support date format "dd-MMM-yyyy" and "MMM-yyyy" we need to include a plugin code below:-

        (function () {

        var customDateDDMMMYYYYToOrd = function (date) {
            "use strict"; //let's avoid tom-foolery in this function
            // Convert to a number YYYYMMDD which we can use to order
            var dateParts = date.split(/-/);
            return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + (dateParts[0]*1);
        };

        // This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift
        // so that it's the first data type (so it takes priority over existing)
        jQuery.fn.dataTableExt.aTypes.unshift(
            function (sData) {
                "use strict"; //let's avoid tom-foolery in this function
                if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) {
                    return 'date-dd-mmm-yyyy';
                }
                return null;
            }
        );

        // define the sorts
        jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-asc'] = function (a, b) {
            "use strict"; //let's avoid tom-foolery in this function
            var ordA = customDateDDMMMYYYYToOrd(a),
                ordB = customDateDDMMMYYYYToOrd(b);
            return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
        };

        jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-desc'] = function (a, b) {
            "use strict"; //let's avoid tom-foolery in this function
            var ordA = customDateDDMMMYYYYToOrd(a),
                ordB = customDateDDMMMYYYYToOrd(b);
            return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
        };

        })();

        and we have to specify the new introduced type to column of date as below:-
        var costRevenueGraph = $('#costRevenueGraphTbl').dataTable({
                                "sPaginationType": "full_numbers",
                                "paging": true,
                                "bSort": true,
                                "ordering": false,
                                "info": false,
                                "iDisplayLength": 10,
                                "aaData": costRevenueGraphData,
                                "sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
                                "aoColumns": [
                                    { "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
                                    { "mDataProp": 'cost',"sType":'formatted-num' },
                                    { "mDataProp": 'costOFInternalFailure',"sType":'formatted-num' },
                                    { "mDataProp": 'costOFExternalFailure',"sType":'formatted-num' },
                                    { "mDataProp": 'costOFPreventiveInvestment',"sType":'formatted-num' },
                                    { "mDataProp": 'costOFAssessmentInvestment',"sType":'formatted-num' },
                                    { "mDataProp": 'costOfRedHerringInvestment',"sType":'formatted-num' },
                                    { "mDataProp": 'revenue',"sType":'formatted-num' }
                                ],
                                "aoColumnDefs": [{
                                    "aTargets": [0],
                                    "fnRender": function(data, type, row) {
                                        return $filter('date')(data.aData[data.mDataProp], 'dd-MMM-yyyy');
                                    }
                                },{
                                    "aTargets": [1,2,3,4,5,6,7],
                                    "aType":'formatted-num',
                                    "fnRender": function(data, type, row) {
                                        return $filter('currency')(data.aData[data.mDataProp], '$');
                                    }
                                }]
                            });
    As same above if we want to support format "MMM-yyyy" we need to do a little hack
    (function () {

    var customDateDDMMMYYYYToOrd = function (date) {
        "use strict"; //let's avoid tom-foolery in this function
        // Convert to a number YYYYMMDD which we can use to order
        date= "01-"+date
        var dateParts = date.split(/-/);
        return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + (dateParts[0]*1);
    };

    // This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift
    // so that it's the first data type (so it takes priority over existing)
    jQuery.fn.dataTableExt.aTypes.unshift(
        function (sData) {
            sData= "01-"+date
            "use strict"; //let's avoid tom-foolery in this function
            if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) {
                return 'date-dd-mmm-yyyy';
            }
            return null;
        }
    );

    // define the sorts
    jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-asc'] = function (a, b) {
        "use strict"; //let's avoid tom-foolery in this function
        var ordA = customDateDDMMMYYYYToOrd(a),
            ordB = customDateDDMMMYYYYToOrd(b);
        return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
    };

    jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-desc'] = function (a, b) {
        "use strict"; //let's avoid tom-foolery in this function
        var ordA = customDateDDMMMYYYYToOrd(a),
            ordB = customDateDDMMMYYYYToOrd(b);
        return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
    };

    })();

and how to implement here is a demo
var costRevenueGraph = $('#fcSimulationGraphTbl').dataTable({
                        "sPaginationType": "full_numbers",
                        "paging": true,
                        "bSort": true,
                        "ordering": false,
                        "info": false,
                        "iDisplayLength": 10,
                        "aaData": forecastingGraphObjTblData,
                        "sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
                        "aoColumns": [
                            { "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
                            { "mDataProp": 'forecastDemand',"sType":'formatted-num' },
                            { "mDataProp": 'actualDemand',"sType":'formatted-num' },
                            { "mDataProp": 'actualAbsolutePercentageError',"sType":'percent' },
                            { "mDataProp": 'trackingSignal',"sType":'percent' }
                        ],
                        "aoColumnDefs": [{
                            "aTargets": [0],
                            "fnRender": function(data, type, row) {
                                return $filter('date')(data.aData[data.mDataProp], 'MMM-yyyy');
                            }
                        },{
                            "aTargets": [1,2],
                            "aType":'formatted-num',
                            "fnRender": function(data, type, row) {
                                return $filter('number')(data.aData[data.mDataProp]);
                            }
                        },{
                            "aTargets": [3,4],
                            "aType":'percent',
                            "fnRender": function(data, type, row) {
                                return data.aData[data.mDataProp]+'%';
                            }
                        }]
                    });


Answer 4:

我也面临着同样的问题,我已经通过使用下面的技巧解决它:

<span style="display: none;">{{ date('Y-m-d', strtotime($date_varilable)) }}</span>

我已经把相同span这是隐藏的,但将日期标签'Ym-d'的格式,而此格式正确解析由ChromeFirefox和其工作的罚款。

说明:这招是用于在其中有一个复选框列提供的排序,它的检查或未经检查是基于一些价值。 在这种情况下,跨度值,用于通过数据表库排序的目的。



文章来源: DataTables: Date Sorting not working on Firefox & IE