如何在数据表中进行自定义日期排序?
How to make custom date sort in datatables?
我有 table 日期列:
2015-03-03 20:14
2015-04-15 20:33
2015-04-20 09:34
2015-04-28 22:18
但是有些单元格没有日期(我标记它-
)。当我使用一般排序功能时,它看起来像:
—
—
—
2015-03-03 20:14
2015-04-15 20:33
2015-04-20 09:34
2015-04-28 22:18
但我需要:
2015-03-03 20:14
2015-04-15 20:33
2015-04-20 09:34
2015-04-28 22:18
—
—
—
实际上,我不得不按两个参数进行排序,并且还在 table 的末尾设置了没有日期的行。
我添加了两个数据属性(时间戳格式的状态和日期):
<tr>
<td><span class="label label-warning" data-status="0" data-date="1397562467">Status 0</span></td>
<td>2015-03-03 20:14</td>
</tr>
<tr>
<td><span class="label label-warning" data-status="1" data-date="1397567321">Status 1</span></td>
<td>2015-04-15 20:33</td>
</tr>
<tr>
<td><span class="label label-warning" data-status="0" data-date="1397567746">Status 0</span></td>
<td>2015-04-20 09:34</td>
</tr>
<tr>
<td><span class="label label-warning" data-status="0" data-date="1397567321">Status 0</span></td>
<td>2015-04-15 20:33</td>
</tr>
我制作了新的自定义排序功能:
jQuery.fn.dataTableExt.oSort['status-date-asc'] = function(x,y) {
var xStatus, xDate, yStatus, yDate;
xStatus = $(x).data('status');
yStatus = $(y).data('status');
xDate = $(x).data('date');
yDate = $(y).data('date');
return xStatus > yStatus ? 1
: xStatus < yStatus ? -1
: xDate > yDate ? 1
: xDate < yDate ? -1 : 0;
};
并用新的排序函数初始化这一行:
var currentTable = $('#current_table').dataTable( {
"aaSorting": [ [5, 'asc'] ],
"aoColumns": [
null,
null,
null,
null,
null,
{ "sType": 'status-date' },
null,
null,
null
],
});
最后,看起来:
- 状态 0,日期 = 2015-03-03 20:14
- 状态 0,日期 = 2015-04-15 20:33
- 状态 0,日期 = 2015-04-20 09:34
- 状态 0,日期 = 2015-04-28 22:18
- 状态 0,日期 = n/a
- 状态 0,日期 = n/a
- 状态 0,日期 = n/a
- 状态 1,日期 = 2015-03-03 20:14
- 状态 1,日期 = 2015-04-15 20:33
- 状态 1,日期 = 2015-04-20 09:34
- 状态 1,日期 = 2015-04-28 22:18
- 状态 1,日期 = n/a
- 状态 1,日期 = n/a
- 状态 1,日期 = n/a
我有 table 日期列:
2015-03-03 20:14
2015-04-15 20:33
2015-04-20 09:34
2015-04-28 22:18
但是有些单元格没有日期(我标记它-
)。当我使用一般排序功能时,它看起来像:
—
—
—
2015-03-03 20:14
2015-04-15 20:33
2015-04-20 09:34
2015-04-28 22:18
但我需要:
2015-03-03 20:14
2015-04-15 20:33
2015-04-20 09:34
2015-04-28 22:18
—
—
—
实际上,我不得不按两个参数进行排序,并且还在 table 的末尾设置了没有日期的行。 我添加了两个数据属性(时间戳格式的状态和日期):
<tr>
<td><span class="label label-warning" data-status="0" data-date="1397562467">Status 0</span></td>
<td>2015-03-03 20:14</td>
</tr>
<tr>
<td><span class="label label-warning" data-status="1" data-date="1397567321">Status 1</span></td>
<td>2015-04-15 20:33</td>
</tr>
<tr>
<td><span class="label label-warning" data-status="0" data-date="1397567746">Status 0</span></td>
<td>2015-04-20 09:34</td>
</tr>
<tr>
<td><span class="label label-warning" data-status="0" data-date="1397567321">Status 0</span></td>
<td>2015-04-15 20:33</td>
</tr>
我制作了新的自定义排序功能:
jQuery.fn.dataTableExt.oSort['status-date-asc'] = function(x,y) {
var xStatus, xDate, yStatus, yDate;
xStatus = $(x).data('status');
yStatus = $(y).data('status');
xDate = $(x).data('date');
yDate = $(y).data('date');
return xStatus > yStatus ? 1
: xStatus < yStatus ? -1
: xDate > yDate ? 1
: xDate < yDate ? -1 : 0;
};
并用新的排序函数初始化这一行:
var currentTable = $('#current_table').dataTable( {
"aaSorting": [ [5, 'asc'] ],
"aoColumns": [
null,
null,
null,
null,
null,
{ "sType": 'status-date' },
null,
null,
null
],
});
最后,看起来:
- 状态 0,日期 = 2015-03-03 20:14
- 状态 0,日期 = 2015-04-15 20:33
- 状态 0,日期 = 2015-04-20 09:34
- 状态 0,日期 = 2015-04-28 22:18
- 状态 0,日期 = n/a
- 状态 0,日期 = n/a
- 状态 0,日期 = n/a
- 状态 1,日期 = 2015-03-03 20:14
- 状态 1,日期 = 2015-04-15 20:33
- 状态 1,日期 = 2015-04-20 09:34
- 状态 1,日期 = 2015-04-28 22:18
- 状态 1,日期 = n/a
- 状态 1,日期 = n/a
- 状态 1,日期 = n/a