我已经实现了DataTable的1.13.1版本，其中包含了按日期范围过滤的功能，并且创建了两个按钮，一个用于继续过滤，另一个用于重置过滤（在datatable网页的指南中，没有这些按钮）。
Date Range Filter Datatable
问题是，当过滤和重置几次（尝试日期选择器中的各种组合）时，有一些结果显示错误。
我不知道我实现的算法是否是我想要的功能（两个按钮）的正确算法。
先谢了。
var minDate, maxDate;
$(function() {
// Create date inputs
minDate = new DateTime($('#min'), {
format: 'DD / MM / YYYY'
});
maxDate = new DateTime($('#max'), {
format: 'DD / MM / YYYY'
});
// DataTables initialisation
var table = $('#example').DataTable();
$("#filter_date").click(function() {
if ( $("#min").val() !== "" || $("#max").val() !== "") {
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = minDate.val();
var max = maxDate.val();
var date = new Date( data[4] );
if (
( min === null && max === null ) ||
( min === null && date <= max ) ||
( min <= date && max === null ) ||
( min <= date && date <= max )
) {
return true;
}
return false;
}
);
table.draw();
}
});
$("#reset_filter_date").click(function() {
if ( $("#min").val() !== "" || $("#max").val() !== "" ) {
$("#min, #max").val("");
$.fn.dataTable.ext.search = [];
table.draw();
}
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.2.0/css/dataTables.dateTime.min.css">
</head>
<body>
<div style="margin: 20px;">
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>From:</td>
<td>
<input type="text" id="min" name="min">
</td>
</tr>
<tr>
<td>Until:</td>
<td>
<input type="text" id="max" name="max">
</td>
</tr>
<tr>
<td>
<button id="filter_date">Filter</button>
<button id="reset_filter_date">Reset</button>
</td>
</tr>
</tbody>
</table>
<br><br>
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
1条答案
按热度按时间lmyy7pcs1#
数据表搜索插件允许将一些函数推送到一个函数数组中，该数组将在搜索时执行。
你只需要推你的自定义函数一次...在点击hadler中，只需触发搜索和绘制。
还有......尝试总是使用
const和let而不是var。您可以阅读有关它的here