jQuery 数据表：单击另一列时对一列进行排序。答案

【问题标题】：jQuery Datatables: Sort on one column when clicking on another.jQuery 数据表：单击另一列时对一列进行排序。
【发布时间】：2015-05-28 04:32:00
【问题描述】：

我有一个带有日期和时间列的 jQuery 数据表：

Date        Time        Note
1/2/2015    10:02:03    Test
1/4/2915    02:12:32    Test
1/3/2015    02:05:03    Test
3/2/2015    11:02:03    Test
1/4/2015    01:02:13    Test

我想实现时间排序。在按时间排序时，我们首先需要按日期排序，然后按时间排序：

Date        Time        Note
1/2/2015    10:02:03    Test
1/3/2015    02:05:03    Test
1/4/2015    01:02:13    Test
1/4/2915    02:12:32    Test
3/2/2015    11:02:03    Test

我有以下代码：

//jQuery datatable code
{ mData: 'date', sTitle: 'Date', sClass: "dtDate" },
{ mData: 'time', sTitle: 'Time', sClass: "dtTime", sType: "time-date-sort"},
{ mData: 'notes', sTitle: 'Notes' },
// More code...

jQuery.fn.dataTableExt.oSort['time-date-sort-asc'] = function(startTime, endTime) {      
    //Date and time sorts go here
    return sortedVal;
};

jQuery.fn.dataTableExt.oSort['time-date-sort-desc'] = function (startTime, endTime) {
    //Date and time sorts go here
    return sortedVal;
};

我可以使用它对时间进行排序，但是我如何首先对日期进行排序？ 我试图弄清楚如何获取表格行中日期值的引用（与该行中的时间值相关联）。例如，如何获取日期对象1/2/2015 表示时间为 10:02:03 的行？ 似乎我无法将自定义参数添加到 oSort 函数。我是使用jQuery.fn.dataTableExt.oSort 还是jQuery.fn.dataTableExt.afnSortData 是更好的选择？

【问题讨论】：

标签： javascript jquery sorting datatable jquery-datatables

【解决方案1】：

要从其他列获取值以包含在您的自定义排序中，您必须创建自定义数据源排序插件。下面将返回第 0 列和第 1 列的值作为日期+时间字符串，即1/2/2015 10:02:03：

$.fn.dataTable.ext.order['order-time-date-sort'] = function(settings, col) {
    return this.api().row({order:'index'} ).nodes().map(function (tr, i) {
        return $('td:eq(0)', tr).text()+' '+$('td:eq(1)', tr).text();
    });    
}

然后将上面的order-date-time-sort设置为时间列的orderDateType：

var table = $('#example').DataTable({
    columnDefs : [
        { type: 'time-date-sort', 
          orderDataType: "order-time-date-sort", 
          targets: [1] 
        }
    ]                                     
});

现在时间也可以按照日期排序，使用简单的Date.parse()：

jQuery.fn.dataTableExt.oSort['time-date-sort-pre'] = function(value) {      
    return Date.parse(value);
};
jQuery.fn.dataTableExt.oSort['time-date-sort-asc'] = function(a,b) {      
    return a-b;
};
jQuery.fn.dataTableExt.oSort['time-date-sort-desc'] = function(a,b) {
    return b-a;
};

演示 -> http://jsfiddle.net/4toLj9yn/

注意：如果您遇到性能问题，可能是由于表很大，您应该“缓存”order-time-date-sort 的结果（只需将结果存储在变量中）。您也可以考虑使用完全不同的方法 - orthogonal data。

【讨论】：