データ表示用のデータテーブルと、データテーブルに表示される日付範囲を選択するための日付範囲ピッカーがあります。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');
},
しかし、新しい日付範囲を取得したい場合、古い範囲は変更されません新しい日付範囲を読み取ってdatatables 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();
});