自定义按值的日期部分对 DataTables 列进行排序
Posted
技术标签:
【中文标题】自定义按值的日期部分对 DataTables 列进行排序【英文标题】：Custom sorting DataTables column by date part of the value 【发布时间】：2019-09-28 04:51:56 【问题描述】：我在我的代码中使用 jQuery DataTables。 我的其中一列具有值，例如：
AB 05-05-2019
CD 01-05-2019
EF 09-05-2019
当我单击此列的标题时，我希望它仅按日期排序，而不是按前缀（'AB'、'CD'、'EF'）。结果应该是这样的：
CD 01-05-2019
AB 05-05-2019
EF 09-05-2019
我尝试过的是，仅插入带有日期的隐藏列，当我使用前缀对列进行排序时，我使用 javascript 对隐藏列进行排序。 但是，使用jQuery DataTables的默认配置有什么合适的方法吗？
【问题讨论】：
进展如何？您解决了问题还是仍在寻找更好的答案？ 【参考方案1】：假设您的值是格式为“DD-MM-YYYY”的日期，前缀为两个字符和一个空格，您可以构建自己的小排序插件，具有如下自定义排序功能：
(first, second) =>
const firstDate = new Date(first.substr(3).split('-').reverse().join('-'));
const secondDate = new Date(second.substr(3).split('-').reverse().join('-'));
return firstDate - secondDate;
;
因此，您的完整示例可能如下所示：
//source data
const srcData = [
id: 1,
value: 'AB 05-05-2019'
,
id: 2,
value: 'CD 01-05-2019'
,
id: 3,
value: 'EF 09-05-2019'
];
//datatable initialization
const dataTable = $('#mytable').DataTable(
dom: 't',
data: srcData,
columns: ['id', 'value'].map(header => (
title: header,
data: header
)),
columnDefs: [
type: 'prefixedDate',
targets: 1
]
);
//extract Date part of the string
const extractDate = str => new Date(str.substr(3).split('-').reverse().join('-'));
//custom sorting
Object.assign($.fn.DataTable.ext.oSort,
'prefixedDate-asc': (a, b) => extractDate(a) - extractDate(b),
'prefixedDate-desc': (a, b) => extractDate(b) - extractDate(a),
);<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>【讨论】：
以上是关于自定义按值的日期部分对 DataTables 列进行排序的主要内容，如果未能解决你的问题，请参考以下文章