javascript - DataTables+Datepicker 按日期范围过滤表格
问题描述
尝试使用两个有界日期选择器按日期范围实现 DataTables 过滤器。
我在 SO 看到过几个类似的问题,但没有一个有答案的人对我有用。
到目前为止,我设法实现了界面元素,但不知道如何将它们组合在一起以进一步进行。任何帮助表示赞赏。
var myTableData =
[
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"id": "5",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"id": "6",
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02",
"office": "New York",
"extn": "4804"
},
{
"id": "7",
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012/08/06",
"office": "San Francisco",
"extn": "9608"
}
];
$('.datepicker').datepicker();
var myDataTable = $('#staff').DataTable({
sDom: 't',
data: myTableData,
columns: [
{title: 'Name', data: 'name'},
{title: 'Position', data: 'position'},
{title: 'Office', data: 'office'},
{title: 'Hire date', data: 'start_date'},
{title: 'Salary', data: 'salary'}
]
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<label>Start date:</label>
<input id="startdate" class="datepicker"></input>
<label>End date:</label>
<input id="enddate" class="datepicker"></input>
<button id="filter">Filter</button>
<table id="staff"></table>
</body>
</html>
解决方案
我对你的代码做了一些修改。请参阅下面 JavaScript 片段中的注释,其中大部分位于底部,在您的var myDataTable = $('#staff').DataTable()
声明下:
// I changed some of the start_date values to be more recent, just for testing.
var myTableData = [{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2017/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2018/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2019/01/12",
"office": "San Francisco",
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2018/03/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"id": "5",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2018/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"id": "6",
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2018/12/02",
"office": "New York",
"extn": "4804"
},
{
"id": "7",
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2018/08/06",
"office": "San Francisco",
"extn": "9608"
}
];
var myDataTable = $('#staff').DataTable({
sDom: 't',
data: myTableData,
columns: [{
title: 'Name',
data: 'name'
},
{
title: 'Position',
data: 'position'
},
{
title: 'Office',
data: 'office'
},
{
title: 'Hire date',
data: 'start_date'
},
{
title: 'Salary',
data: 'salary'
}
]
});
// I instantiate the two datepickers here, instead of all at once like before.
// I also changed the dateFormat to match the format of the dates in the data table.
$("#startdate").datepicker({
"dateFormat": "yy/mm/dd",
"onSelect": function(date) { // This handler kicks off the filtering.
minDateFilter = new Date(date).getTime();
myDataTable.draw(); // Redraw the table with the filtered data.
}
}).keyup(function() {
minDateFilter = new Date(this.value).getTime();
myDataTable.draw();
});
$("#enddate").datepicker({
"dateFormat": "yy/mm/dd",
"onSelect": function(date) {
maxDateFilter = new Date(date).getTime();
myDataTable.draw();
}
}).keyup(function() {
maxDateFilter = new Date(this.value).getTime();
myDataTable.draw();
});
// The below code actually does the date filtering.
minDateFilter = "";
maxDateFilter = "";
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if (typeof aData._date == 'undefined') {
aData._date = new Date(aData[3]).getTime(); // Your date column is 3, hence aData[3].
}
if (minDateFilter && !isNaN(minDateFilter)) {
if (aData._date < minDateFilter) {
return false;
}
}
if (maxDateFilter && !isNaN(maxDateFilter)) {
if (aData._date > maxDateFilter) {
return false;
}
}
return true;
}
);
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<label>Start date:</label>
<input id="startdate" class="date_range_filter" />
<label>End date:</label>
<input id="enddate" class="date_range_filter" />
<table id="staff"></table>
我还删除了“过滤器”按钮,因为在此实现中不需要它。当您从日期选择器中选择日期时,该表应自动更新。
推荐阅读
- c# - 如何在 Photon 中列出房间中的玩家?
- javascript - 有没有办法解决 React Native 中的模块?
- c++ - 我需要对一维数组的头文件和 cpp 文件进行哪些更改,以便它也适用于二维数组?
- android - Mapsforge .map 文件未显示在 osmdroid 地图视图上
- sql - 我想在 case 语句中计算一个计数
- c++ - 用于 std::vector 的 std::is_copy_constructable
- c - 构建 GCC:有没有办法只构建 cpp?
- c++ - 查找数组 C++ 中出现次数最多的元素
- android - 我的 webview 在 api 级别 29 上不起作用 - 为什么?
- debugging - 可以在 VCode 的调试控制台中自动评估吗?