数据表 - 不能按不同于字符串类型的列排序
Datatables - Can't sort by column different than string type
我有一个数据table,其中 'date' 列为字符串类型。现在,当我想按它排序时,由于明显的原因,它显然没有正确排序,所以我将 sType 更改为 'date',一切都很好。
然而,问题是当我将 sType 从字符串更改为其他内容时,我无法再按此列排序。页面加载后的初始排序已排序并且很好,但我不能再单击该列来按它排序。它的行为就像 bSortable 是假的,但它不是(调试它)。 bSort 也是如此。
此外,我已经尝试实现自定义比较器,包括排序插件等。同样的结果。
有什么想法可能导致问题吗?
编辑:
我的数据table 初始化进程:
$('#scanDataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fp>',
"aaSorting": [[0, "asc"]],
"iDisplayLength": "100",
"aoColumnDefs": [
{"sType": "date", "aTargets": [0]}
]
});
如果"sType"参数是字符串,点击header列会在升序和降序排序之间切换(但它是字符串所以排序不正确)。将 "sType" 切换为日期或除字符串以外的任何其他内容后,单击 table header 什么都不做。
正如我之前提到的,我尝试在第 0 列选项中使用 "bSortable": true,在 dataTable 选项中使用 "bSort": true,并导入自定义排序插件,但它没有改变任何东西。我的日期格式是:17.11.2014 21:54:39。
重要提示: 在对 aSorting 稍作调整后,我注意到 asc 和 desc 排序是相同的,这可能意味着排序本身是问题所在,而不是 table 选项.
您的日期格式与 new Date()
或 Data.parse()
不兼容,这就是为什么当您尝试将默认 date
类型应用于柱子。它正在尝试对一堆 NaN
字符串进行排序。所以你必须自己创建一个合适的插件。
这是一个示例,sikor-date
将您的格式 dd.mm.yyyy hh:mm:ss
解析为标准 UTC 时间:
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"sikor-date-pre": function(a) {
var dateParts = a.split('.'),
time = a.split(' ')[1].split(':'),
year = parseInt(dateParts[2])-1900,
month = parseInt(dateParts[1])-1,
day = parseInt(dateParts[0]),
hours = parseInt(time[0]),
mins = parseInt(time[1]),
secs = parseInt(time[2]);
return Date.UTC(year, month, day, hours, mins, secs);
},
"sikor-date-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"sikor-date-desc": function(a,b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
整个日期字符串被拆分为逻辑部分,解析为整数,然后转换为可与 Date.UTC()
进行比较的数字。
演示 -> http://jsfiddle.net/nm261eyn/
此排序插件应该适用于所有版本的数据表。用作
"aoColumnDefs": [
{"sType": "sikor-date", "aTargets": [0]}
]
TODO : 错误处理,检查日期是否符合要求,检查是否为空字符串 ""
等。插件盲目地假设日期是一个字符串格式完全相同 dd.mm.yyyy hh:mm:ss
.
测试table:
<tbody>
<tr><td>17.11.2014 21:54:39</td></tr>
<tr><td>18.11.2013 21:54:39</td></tr>
<tr><td>17.11.2014 1:54:39</td></tr>
<tr><td>17.11.2014 1:54:38</td></tr>
<tr><td>16.11.2014 22:54:39</td></tr>
<tr><td>16.11.2015 00:00:00</td></tr>
</tbody>
我有一个数据table,其中 'date' 列为字符串类型。现在,当我想按它排序时,由于明显的原因,它显然没有正确排序,所以我将 sType 更改为 'date',一切都很好。
然而,问题是当我将 sType 从字符串更改为其他内容时,我无法再按此列排序。页面加载后的初始排序已排序并且很好,但我不能再单击该列来按它排序。它的行为就像 bSortable 是假的,但它不是(调试它)。 bSort 也是如此。
此外,我已经尝试实现自定义比较器,包括排序插件等。同样的结果。
有什么想法可能导致问题吗?
编辑:
我的数据table 初始化进程:
$('#scanDataTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fp>',
"aaSorting": [[0, "asc"]],
"iDisplayLength": "100",
"aoColumnDefs": [
{"sType": "date", "aTargets": [0]}
]
});
如果"sType"参数是字符串,点击header列会在升序和降序排序之间切换(但它是字符串所以排序不正确)。将 "sType" 切换为日期或除字符串以外的任何其他内容后,单击 table header 什么都不做。
正如我之前提到的,我尝试在第 0 列选项中使用 "bSortable": true,在 dataTable 选项中使用 "bSort": true,并导入自定义排序插件,但它没有改变任何东西。我的日期格式是:17.11.2014 21:54:39。
重要提示: 在对 aSorting 稍作调整后,我注意到 asc 和 desc 排序是相同的,这可能意味着排序本身是问题所在,而不是 table 选项.
您的日期格式与 new Date()
或 Data.parse()
不兼容,这就是为什么当您尝试将默认 date
类型应用于柱子。它正在尝试对一堆 NaN
字符串进行排序。所以你必须自己创建一个合适的插件。
这是一个示例,sikor-date
将您的格式 dd.mm.yyyy hh:mm:ss
解析为标准 UTC 时间:
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"sikor-date-pre": function(a) {
var dateParts = a.split('.'),
time = a.split(' ')[1].split(':'),
year = parseInt(dateParts[2])-1900,
month = parseInt(dateParts[1])-1,
day = parseInt(dateParts[0]),
hours = parseInt(time[0]),
mins = parseInt(time[1]),
secs = parseInt(time[2]);
return Date.UTC(year, month, day, hours, mins, secs);
},
"sikor-date-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"sikor-date-desc": function(a,b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
整个日期字符串被拆分为逻辑部分,解析为整数,然后转换为可与 Date.UTC()
进行比较的数字。
演示 -> http://jsfiddle.net/nm261eyn/
此排序插件应该适用于所有版本的数据表。用作
"aoColumnDefs": [
{"sType": "sikor-date", "aTargets": [0]}
]
TODO : 错误处理,检查日期是否符合要求,检查是否为空字符串 ""
等。插件盲目地假设日期是一个字符串格式完全相同 dd.mm.yyyy hh:mm:ss
.
测试table:
<tbody>
<tr><td>17.11.2014 21:54:39</td></tr>
<tr><td>18.11.2013 21:54:39</td></tr>
<tr><td>17.11.2014 1:54:39</td></tr>
<tr><td>17.11.2014 1:54:38</td></tr>
<tr><td>16.11.2014 22:54:39</td></tr>
<tr><td>16.11.2015 00:00:00</td></tr>
</tbody>