我有一个用于数据表示的数据表和一个用于选择数据表中显示的日期范围的 daterangepicker。我通过 ajax 调用获取 tge 数据。在初始化时一切都很好，我得到了所选初始日期范围的数据
"ajax": {
"url": "/api/ajax", // ajax source
data: function (d) {
d.startDate = $('#reportrange').data(daterangepicker).startDate.format('DD.MM.YYYY');
d.endDate = $('#reportrange').data(daterangepicker).endDate.format('DD.MM.YYYY');
},
但是，如果我想获得一个新的日期范围，旧的范围不会改变我如何读取新的日期范围并将其获取到数据表 ajax
到目前为止的完整代码
$('#reportrange').daterangepicker({
startDate: moment().subtract('days', 29),
endDate: moment(),
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
buttonClasses: ['btn'],
applyClass: 'green',
cancelClass: 'default',
format: 'DD.MM.YYYY',
separator: ' to ',
},
function (start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
//Set the initial state of the picker label
$('#reportrange span').html(moment().subtract('days', 29).format('DD.MM.YYYY') + ' - ' + moment().format('DD.MM.YYYY'));
var oTable = $('#sample_1').DataTable({
buttons: [
{
extend: 'print',
className: 'btn dark btn-outline',
exportOptions: {columns: [0, 1, 2, 3]}
},
{
extend: 'pdf', className: 'btn dark btn-outline',
download: 'open',
exportOptions: {columns: [0, 1, 2, 3]}
},
{
extend: 'csv',
className: 'btn dark btn-outline ',
exportOptions: {columns: [0, 1, 2, 3]}
},
],
"order": [
[0, 'desc']
],
"lengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 5,
"processing": true,
"serverSide": true,
"ajax": {
"url": "/api/ajax", // ajax source
"data": function (d) {
d.startDate = $('#reportrange').data(daterangepicker).startDate.format('DD.MM.YYYY');
d.endDate = $('#reportrange').data(daterangepicker).endDate.format('DD.MM.YYYY');
},
},
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bSortClasses": false,
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
});
$('#reportrange').on('apply.daterangepicker', function(ev) {
oTable.draw();
ev.preventDefault();
});