我想通过单个日期范围选择器来过滤我的数据表,但不起作用。如何解决?
This is My Page Screenshot I Adapted the code From this Source, But in this code using two input tag
在我的代码中,我想使用单个日期选择器过滤我的数据表,我可以使用两个标签输入过滤数据表,但是我不知道如何使用具有两个值的单个datepicker过滤:日期从(min)和日期到(最多)...这是我的代码:
<div class="input-group input-daterange ">
<button type="button" class="btn btn-default pull-right date-range-filter" id="daterange-btn">
<span>
<i class="fa fa-calendar"></i>
</span>
<i class="fa fa-caret-down"></i>
</button>
</div>
<table id="tableku" class=" table table-bordered table-striped"> <!-- my table tag. -->
<script type="text/javascript">
$(document).ready(function() {
table= $('#tableku').DataTable( {
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
} );
var start = moment();
var end = moment();
function cb(start, end) {
$('#daterange-btn span').html(start.format('DD MMMM YYYY') + ' - ' + end.format('DD MMMM YYYY'));
alert(start.format('DD MMMM YYYY')+ ' - ' + end.format('DD MMMM YYYY')); /*Get The Value from my datepicker*/
}
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = start.format('YYYY-MM-DD');
var max = end.format('YYYY-MM-DD');
var createdAt = data[1] || 0; // my date column in the table
if (
(min == "" || max == "") ||
(moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
) {
return true;
}
return false;
}
);
// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
table.draw();
});
$('#my-table_filter').hide();
$('#daterange-btn').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);
} );
</script>