数据表在不使用任何数据表插件的情况下过滤日期范围
Datatables filter date range without using any datatables plugin
以下是我的html结构
<div class="filters">
<input type="text" name="hireDate" id="hireDate">
<input type="text" name="terminationDate" id="terminationDate">
</div>
<table id="exampleTable">
<thead>
<tr>
<th>Employee Name</th>
<th>Hire Date</th>
<th>Termination Date</th>
<th>Designation </th>
<th> Hire Date epoch </th>
<th> Termination Date epoch </th>
</tr>
</thead>
<tbody>
<!-- table data here -->
</tbody>
</table>
我想根据所选的雇用日期和终止日期过滤 table 数据
- 如果用户选择
HireDate
和 terminationDate
作为 1-jan-2016
,
31-jan-2016
分别,然后 table 应该显示所有行
有 HireDate >= 1-jan-2016
和 TerminationDate <= 31-jan-2016
- 如果用户只选择
HireDate
那么 table 应该只显示行
其中有 HireDate >= userSelectedHireDate
- 如果用户只选择
TerminationDate
那么 table 应该只显示
具有 TerminationDate <= userSelectedTerminationDate
的行
以下是我解决这个问题的方法
var dataTable = $('#exampleTable').DataTable({
"columnDefs" : [{
"targets":[4, 5],
"visible":false,
}],
});
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var startDate = $('#hireDate').val();
//convert date into epoch
startDate = (startDate == '') ? -1 : moment(startDate, 'MMMM DD, YYYY').valueOf()/1000;
var endDate = $('#terminationDate').val();
endDate = (endDate == '') ? -1 : moment(endDate, 'MMMM DD, YYYY').valueOf()/1000;
var tableStartDate = (data[4] == '--') ? 0 : data[4];
var tableEndDate = (data[5] == '--') ? 1 : data[5];
//Show all rows if start and end date is not selected
if(startDate == -1 && endDate == -1) {
return true;
}
if(tableStartDate >= startDate) {
if(endDate == -1) {
return true;
}
if(tableEndDate != 1 && tableEndDate <= endDate){
return true;
}
return false;
}
return false;
}
);
$('#hireDate').on('change', function(){
$('#exampleTable').dataTable().api().column(1).search('', true, false).draw();
});
$('#terminationDate').on('change', function(){
$('#exampleTable').dataTable().api().column(2).search('', true, false).draw();
});
以下是我的html结构
<div class="filters">
<input type="text" name="hireDate" id="hireDate">
<input type="text" name="terminationDate" id="terminationDate">
</div>
<table id="exampleTable">
<thead>
<tr>
<th>Employee Name</th>
<th>Hire Date</th>
<th>Termination Date</th>
<th>Designation </th>
<th> Hire Date epoch </th>
<th> Termination Date epoch </th>
</tr>
</thead>
<tbody>
<!-- table data here -->
</tbody>
</table>
我想根据所选的雇用日期和终止日期过滤 table 数据
- 如果用户选择
HireDate
和terminationDate
作为1-jan-2016
,31-jan-2016
分别,然后 table 应该显示所有行 有HireDate >= 1-jan-2016
和TerminationDate <= 31-jan-2016
- 如果用户只选择
HireDate
那么 table 应该只显示行 其中有HireDate >= userSelectedHireDate
- 如果用户只选择
TerminationDate
那么 table 应该只显示 具有TerminationDate <= userSelectedTerminationDate
的行
以下是我解决这个问题的方法
var dataTable = $('#exampleTable').DataTable({
"columnDefs" : [{
"targets":[4, 5],
"visible":false,
}],
});
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var startDate = $('#hireDate').val();
//convert date into epoch
startDate = (startDate == '') ? -1 : moment(startDate, 'MMMM DD, YYYY').valueOf()/1000;
var endDate = $('#terminationDate').val();
endDate = (endDate == '') ? -1 : moment(endDate, 'MMMM DD, YYYY').valueOf()/1000;
var tableStartDate = (data[4] == '--') ? 0 : data[4];
var tableEndDate = (data[5] == '--') ? 1 : data[5];
//Show all rows if start and end date is not selected
if(startDate == -1 && endDate == -1) {
return true;
}
if(tableStartDate >= startDate) {
if(endDate == -1) {
return true;
}
if(tableEndDate != 1 && tableEndDate <= endDate){
return true;
}
return false;
}
return false;
}
);
$('#hireDate').on('change', function(){
$('#exampleTable').dataTable().api().column(1).search('', true, false).draw();
});
$('#terminationDate').on('change', function(){
$('#exampleTable').dataTable().api().column(2).search('', true, false).draw();
});