gpt4 book ai didi

javascript - 按值的日期部分自定义排序 DataTables 列

转载 作者:行者123 更新时间:2023-11-30 19:34:34 25 4
gpt4 key购买 nike

我使用 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 的默认配置吗?

最佳答案

假设您的值是格式为“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>

关于javascript - 按值的日期部分自定义排序 DataTables 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56074884/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com