DataTables自定义日期排序功能

Question

我知道http://www.datatables.net/plug-ins/sorting请不要发布它，因为它不会帮助我。

我期待创建一个自定义日期分类系统，以便与我们的CMS一起使用。问题是客户可以选择他们的日期格式，并且阻止正确的排序。我刚开始使用dataTables，这是我第一次尝试自定义分类系统。下面的代码收集点击正确的信息，但不会诉诸领域。

$.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

解决方案＃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对象。我对日期格式进行了硬编码，直到解决方法可用。

DEMO

见this jsFiddle代码和演示。

解决方案＃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'。

DEMO

见this jsFiddle代码和演示。