DataTables：日期排序無法在Firefox和IE上工作

Question

我在這2個瀏覽器中對日期列的排序有問題，在Chrome中它的工作正常。

我無法弄清楚現在可以做什麼，希望有人能幫助我。

我使用的格式爲（月名年）防爆> 2013年10月

代碼：（包含日期列是數字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

原來IE上的Date.parse()實現和FF不能正確解釋這些字符串，但鉻！

我創建了一個插件來得到這個工作（note--我已經把pull request在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]+'%'; 
          } 
         }] 
        });