如何实现DataTables Ajax在laravel中的日期范围筛选

Question

使用datattables Ajax脚本，我使用以下代码实现了选择、打印、导出和搜索方法。现在我想在DataTables中实现from和to日期范围过滤器，以过滤出数据，并使用打印和导出数据。

$(function() {
let copyButtonTrans = '{{ trans('global.datatables.copy') }}'
let csvButtonTrans = '{{ trans('global.datatables.csv') }}'
let excelButtonTrans = '{{ trans('global.datatables.excel') }}'
let pdfButtonTrans = '{{ trans('global.datatables.pdf') }}'
let printButtonTrans = '{{ trans('global.datatables.print') }}'
let colvisButtonTrans = '{{ trans('global.datatables.colvis') }}'
let selectAllButtonTrans = '{{ trans('global.select_all') }}'
let selectNoneButtonTrans = '{{ trans('global.deselect_all') }}'

let languages = {
'en': 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/English.json'
};
$.extend(true, $.fn.dataTable.Buttons.defaults.dom.button, { className: 'btn' })
$.extend(true, $.fn.dataTable.defaults, {
language: {
url: languages['{{ app()->getLocale() }}']
},
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}, {
orderable: false,
searchable: false,
targets: -1
}],
select: {
style:    'multi+shift',
selector: 'td:first-child'
},
order: [],
scrollX: true,
pageLength: 100,
dom: 'lBfrtip<"actions">',
buttons: [
{
extend: 'selectAll',
className: 'btn-primary',
text: selectAllButtonTrans,
exportOptions: {
columns: ':visible'
},
action: function(e, dt) {
e.preventDefault()
dt.rows().deselect();
dt.rows({ search: 'applied' }).select();
}
},
{
extend: 'selectNone',
className: 'btn-primary',
text: selectNoneButtonTrans,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'copy',
className: 'btn-default',
text: copyButtonTrans,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
className: 'btn-default',
text: csvButtonTrans,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
className: 'btn-default',
text: excelButtonTrans,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdf',
className: 'btn-default',
text: pdfButtonTrans,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
className: 'btn-default',
text: printButtonTrans,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'colvis',
className: 'btn-default',
text: colvisButtonTrans,
exportOptions: {
columns: ':visible'
}
}
]
});
$.fn.dataTable.ext.classes.sPageButton = '';
});

Answer 1

感谢LaravelDaily的Povilas Korop !

控制器代码-

$date = explode(" - ", request()->input('from-to', ""));
// START - This is to implement data range filter in Attendance view
if(count($date) != 2)
{
$date = [now()->subDays(29)->format("d-m-Y"), now()->format("d-m-Y")];
}
// END - This is to implement data range filter in Attendance view

型号代码-

// START - This is to filter using data range values
public function scopeFilterDates($query)
{
$date = explode(" - ", request()->input('from-to', ""));
if(count($date) != 2)
{
$date = [now()->subDays(29)->format("d-m-Y"), now()->format("d-m-Y")];
}
return $query->whereBetween('att_date', $date);
}
// END - This is to filter using data range values

查看代码-

$(function () {
// START - This is to filter using data range values
let searchParams = new URLSearchParams(window.location.search)
let dateInterval = searchParams.get('from-to');
let start = moment().subtract(29, 'days');
let end = moment();
if (dateInterval) {
dateInterval = dateInterval.split(' - ');
start = dateInterval[0];
end = dateInterval[1];
}
$('#date_filter').daterangepicker({
"showDropdowns": true,
"showWeekNumbers": true,
"alwaysShowCalendars": true,
startDate: start,
endDate: end,
locale: {
format: 'DD-MM-YYYY',
firstDay: 1,
},
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')],
'This Year': [moment().startOf('year'), moment().endOf('year')],
'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
}
});
// END - This is to filter using data range values
});