jquery - DataTables自定义日期排序功能

Question

我知道http://www.datatables.net/plug-ins/sorting请不要发布有关它的内容，因为它对我没有帮助。

我希望创建一个自定义日期排序系统以与我们的 CMS 一起使用。问题是客户可以选择他们的日期格式，但它妨碍了正确的排序。我刚刚开始使用数据表，这是我第一次尝试自定义排序系统。下面的代码收集点击时的正确信息，但不使用该字段。

$.fn.dataTable.ext.order['date-custom']=function(settings,col){return this.api().column(col,{order:'index'}).nodes().map(function(td,i){

    function splitDate(str){
        if(str.indexOf("-") >= 0){ str=str.split('-'); }
        else if(str.indexOf("/") >= 0){ str=str.split('/'); }
        else if(str.indexOf(".") >= 0){ str=str.split('.'); }
        else{str='';}
        return str;
    }

    // Needs to pull attribute  "data-format" from the table            
    if($(td).parent().parent().parent().attr('data-date-format') !== undefined  && $(td).parent().parent().parent().attr('data-date-format')!=''){ 

        var format= $(td).parent().parent().parent().attr('data-date-format'); 

        var a = $(td).text(); 
        var p = splitDate(a); 
        var result ='10000000000000';
        if(p.length==3){
            switch(format){
                case 'm-d-Y':result = p[2]+p[0]+p[1]; break;
                case 'm-d-y':result = p[2]+p[0]+p[1]; break;
                case 'm/d/Y':result = p[2]+p[0]+p[1]; break;
                case 'm/d/y':result = p[2]+p[0]+p[1]; break;
                case 'm.d.Y':result = p[2]+p[0]+p[1]; break;
                case 'm.d.y':result = p[2]+p[0]+p[1]; break;
                case 'Y-m-d':result = p[0]+p[1]+p[2]; break;
                case 'y-m-d':result = p[0]+p[1]+p[2]; break;
                case 'Y/m/d':result = p[0]+p[1]+p[2]; break;
                case 'y/m/d':result = p[0]+p[1]+p[2]; break;
                case 'Y.m.d':result = p[0]+p[1]+p[2]; break;
                case 'y.m.d':result = p[0]+p[1]+p[2]; break;
                case 'd-m-Y':result = p[2]+p[1]+p[0]; break;
                case 'd-m-y':result = p[2]+p[1]+p[0]; break;
                case 'd/m/Y':result = p[2]+p[1]+p[0]; break;
                case 'd/m/y':result = p[2]+p[1]+p[0]; break;
                case 'd.m.Y':result = p[2]+p[1]+p[0]; break;
                case 'd.m.y':result = p[2]+p[1]+p[0]; break;
            }
        } 
    }else{  var result='10000000000000';}
    return result; 
});}

表格代码

$("#table").dataTable({
    columns:[ null,null,null,{ "orderDataType": "date-custom" }];
} 

Answer 1

SOLUTION #1

• 您应该添加-pre自定义排序函数的名称，请参阅Ordering plug-in development - Pre-deformatting了解更多信息。

  $.extend($.fn.dataTableExt.oSort, {
      "date-custom-pre":function(a){
          // ... skipped ...
      }
  });
  

• 您的 splitDate 有问题功能。正确的代码是

  function splitDate(str){
      if(str.indexOf("-") >= 0){ str = str.split('-'); }
      else if(str.indexOf("/") >= 0){ str = str.split('/'); }
      else if(str.indexOf(".") >= 0){ str = str.split('.'); }
      else{ str='';}
      return str;
  }
  

• 您将无法使用 $(this).parent().parent() 访问表如this指window目的。我对日期格式进行了硬编码，直到找到解决方法。

演示

参见this jsFiddle用于代码和演示。

SOLUTION #2

使用Custom data source ordering访问排序函数内的表格。

$.fn.dataTable.ext.order['date-custom'] = function  ( settings, col )
{ 
    var api = this.api();

    return api.column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        function splitDate(str){
            if(str.indexOf("-") >= 0){ str = str.split('-'); }
            else if(str.indexOf("/") >= 0){ str = str.split('/'); }
            else if(str.indexOf(".") >= 0){ str = str.split('.'); }
            else{ str='';}
            return str;
        }

        var format = $(api.table().node()).attr('data-format');                 
        var a = $(td).text();

        // Collect date from field
        var p = splitDate(a);
        var result ='10000000000000';
        if(p.length==3){
            switch(format){
                case 'm-d-Y':result = p[2]+p[0]+p[1]; break;
                case 'm-d-y':result = p[2]+p[0]+p[1]; break;
                case 'm/d/Y':result = p[2]+p[0]+p[1]; break;
                case 'm/d/y':result = p[2]+p[0]+p[1]; break;
                case 'm.d.Y':result = p[2]+p[0]+p[1]; break;
                case 'm.d.y':result = p[2]+p[0]+p[1]; break;
                case 'Y-m-d':result = p[0]+p[1]+p[2]; break;
                case 'y-m-d':result = p[0]+p[1]+p[2]; break;
                case 'Y/m/d':result = p[0]+p[1]+p[2]; break;
                case 'y/m/d':result = p[0]+p[1]+p[2]; break;
                case 'Y.m.d':result = p[0]+p[1]+p[2]; break;
                case 'y.m.d':result = p[0]+p[1]+p[2]; break;
                case 'd-m-Y':result = p[2]+p[1]+p[0]; break;
                case 'd-m-y':result = p[2]+p[1]+p[0]; break;
                case 'd/m/Y':result = p[2]+p[1]+p[0]; break;
                case 'd/m/y':result = p[2]+p[1]+p[0]; break;
                case 'd.m.Y':result = p[2]+p[1]+p[0]; break;
                case 'd.m.y':result = p[2]+p[1]+p[0]; break;
            }
        }

        return result;
    } );
};

$(document).ready(function (){
    var table = $('#example').DataTable({
       columnDefs: [
           { targets: 4, orderDataType: 'date-custom', type: 'string' }
       ]
    });
});

请注意，您需要使用 columns 添加列定义或columnDefs并使用以下选项 orderDataType: 'date-custom', type: 'string' .

演示

参见this jsFiddle用于代码和演示。