过滤日期范围内的数据表 [英] Filter datatable with date range
问题描述
我想将datarange picker插件集成到数据表中，然后编写:
I want to integrate datarange picker plugin into datatables and I write:
$(document).ready(function() {
$(function() {
var start = moment("2017-01-01 12:34:16");
var end = moment("2018-03-03 10:08:07");
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
var start = picker.startDate.format('YYYY-MM-DD');
var end = picker.endDate.format('YYYY-MM-DD');
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = start;
var max = end;
var startDate = new Date(data[1]);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
return false;
}
);
table.draw();
});
var dataSet = [
['2093',
'Feb 23, 2018',
'asd asd ',
'asd@hotmail.com',
'£ 50',
'£0.00',
"Feb 23, 2019",
],
['2092',
'Feb 23, 2018',
'asddd asddd',
'dddd@hotmail.com',
'£ 50',
'£0.00',
"Feb 23, 2019",
],
['2050',
'Feb 20, 2018',
'Angus Fret',
'angus@fgf.co.uk',
'£ 50',
'£0.00',
"Feb 20, 2019",
],
['2048',
'Feb 19, 2018',
'John Smith',
'john@smith.com',
'£ 50',
'£0.00',
"Feb 19, 2019",
],
['2046',
'Feb 19, 2018',
'Ana Ana',
'ana@talktalk.net',
'£ 50',
'£0.00',
"Feb 19, 2019",
],
['2045',
'Feb 19, 2018',
'Ray N',
'rayn@nn.com',
'£ 50',
'£0.00',
"Feb 19, 2019",
],
['2044',
'Feb 16, 2018',
'Paul N',
'paul@gmail.com',
'£ 200',
'£0.00',
"Feb 16, 2019",
],
['2042',
'Feb 13, 2018',
'Bradley New',
'new-marden@hotmail.com',
'£ 100',
'£0.00',
"Feb 13, 2019",
],
['2012',
'Jan 27, 2018',
'Mark Zuckenberg',
'markzeg@me.com',
'£ 150',
'£0.00',
"Jan 27, 2019",
],
];
var table = $('#example').DataTable({
"order": [
[0, "desc"]
],
lengthChange: false,
data: dataSet,
columns: [{
title: "ORDER ID"
},
{
title: "ORDER DATE"
},
{
title: "PURCHASED BY"
},
{
title: "RECIPIENT"
},
{
title: "ORDER TOTAL"
},
{
title: "VAT"
},
{
title: "EXPIRY"
}
]
});
});
如您所见，我使用搜索数据表API函数比较日期并获取日期之间的数据(最小，最大)
and as you can see I use a search datatable API function to compare dates and to get data between dates (min, max)
出什么问题了?
当我尝试使用仅具有最小和最大日期之间的日期的新过滤数据绘制表时，我从datatable插件中获得了0行.为什么?
When I try to draw the table with new filtered data only with dates between min and max date I get 0 rows from datatable plugin. WHy?
这是小提琴: https://jsfiddle.net/ankepv5v/16/
怎么了?我的代码中也没有看到任何错误...请帮助
What is wrong? I also don't see any error in my code... please help
我该如何解决我的问题?为什么表会重新显示0个结果?
How I can solve my problem? WHy table retunr me 0 results ?
推荐答案
主要问题是您的日期比较
The main issue is your date comparisons
var start = picker.startDate.format('YYYY-MM-DD');
var end = picker.endDate.format('YYYY-MM-DD');
应该是:
var start = picker.startDate;
var end = picker.endDate;
然后，您还遇到一个问题，即在进行过滤时，您的数据将被完全从搜索中删除，因此在绘制表格后需要使用此
Then you also end up with a problem that your data is getting removed completely out of the search when you filter so you need this after you draw your table
$.fn.dataTable.ext.search.pop();
https://jsfiddle.net/ankepv5v/79/
这篇关于过滤日期范围内的数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
