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的表格。我对日期格式进行了硬编码，直到可以使用变通方法。

<强>样本

请参阅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'。

<强>样本

请参阅this jsFiddle以获取代码和演示。

DataTables自定义日期排序功能

1 个答案: