如何在laravel的DataTablesAjax中實作日期范圍過濾器

使用 DataTables Ajax 腳本，我使用以下代碼實作了選擇、列印、匯出和搜索方法。現在我想在 DataTables 中實作從和到日期范圍過濾器來過濾資料并使用列印和匯出資料。

 $(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 = '';

});

uj5u.com熱心網友回復：

感謝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
});

標籤：javascript 阿贾克斯 拉拉维尔 数据表 数据表

上一篇：大尺寸檔案下載

下一篇：訪問值屬性資料