jQuery 数据表:单击另一列时按一列排序。
jQuery Datatables: Sort on one column when clicking on another.
我有一个 jQuery 数据table,其中包含日期和时间列:
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;
};
我可以使用它对时间进行排序,但我首先要如何对日期进行排序? 我想弄清楚如何获取 table 行中日期值的引用(与该行中的时间值相关联)。 例如,如何为时间为 10:02:03
的行获取日期对象 1/2/2015
? 似乎我无法向 oSort 函数添加自定义参数。我是使用 jQuery.fn.dataTableExt.oSort
还是 jQuery.fn.dataTableExt.afnSortData
是更好的选择?
要从其他列获取值以包含在自定义排序中,您必须创建自定义数据 source 排序插件。下面将 return 列 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/
注意:如果您遇到性能问题,可能会发生巨大的 table,您应该 "cache" [=17= 的结果](只需将结果存储在变量中)。您还可以考虑使用完全不同的方法 - orthogonal data.
我有一个 jQuery 数据table,其中包含日期和时间列:
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;
};
我可以使用它对时间进行排序,但我首先要如何对日期进行排序? 我想弄清楚如何获取 table 行中日期值的引用(与该行中的时间值相关联)。 例如,如何为时间为 10:02:03
的行获取日期对象 1/2/2015
? 似乎我无法向 oSort 函数添加自定义参数。我是使用 jQuery.fn.dataTableExt.oSort
还是 jQuery.fn.dataTableExt.afnSortData
是更好的选择?
要从其他列获取值以包含在自定义排序中,您必须创建自定义数据 source 排序插件。下面将 return 列 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/
注意:如果您遇到性能问题,可能会发生巨大的 table,您应该 "cache" [=17= 的结果](只需将结果存储在变量中)。您还可以考虑使用完全不同的方法 - orthogonal data.