Yajra 数据表日期范围过滤器答案

【问题标题】：Yajra Datatable Date Range FiltersYajra 数据表日期范围过滤器
【发布时间】：2019-12-04 23:04:31
【问题描述】：

当我从日期选择器更改日期时，它会命中 ajax 请求但不过滤我的数据
这是我显示数据表的潜在客户列表列表视图：

<script>
$(document).ready(function() {
    $('#startDate').datepicker();
    $('#endDate').datepicker();

    var table = $('#myDataTable').DataTable({
        processing: true,
        serverSide: true,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        ajax: '{{ route('leadData') }}',
        columns: [
            {data: 'first_name', name: 'first_name'},
            {data: 'last_name', name: 'last_name'},
            {data: 'number', name: 'number'},
            {data: 'email', name: 'email'},
            {data: 'studio_id', name: 'studio_id'},
            {data: 'created_at', name: 'created_at'},
        ]
    });

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            console.log('data');
            var min = $('#startDate').datepicker('getDate');
            var max = $('#endDate').datepicker('getDate');
            var startDate = new Date(data[5]);
            if (min == null && max == null) return true;
            if (min == null && startDate <= max) return true;
            if (max == null && startDate >= min) return true;
            if (startDate <= max && startDate >= min) return true;
            return false;
        }
    );

    $('#startDate, #endDate').change( function() {
        table.draw();
    });
});

这是我显示数据表结果的主要控制器方法：

    /**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function leadData() {

    $leads = Lead::with('studio')->get();
    // dd($leads[0]->created_at);
    return Datatables::of($leads)->editColumn('studio_id', function($leads){
        $leadname = $leads->studio->name;
        return $leadname;
    })->make(true);
}

这是我用于更改日期格式的访问器：

    /**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function getCreatedAtAttribute($value) {
    return date('m/d/Y', strtotime($this->attributes['created_at']));
}

我的桌子是
潜在客户：
id, first_name, last_name, number, email, studio_id, created_at, updated_at

【问题讨论】：

标签： php laravel datatables yajra-datatable

【解决方案1】：

您不需要在服务器端更改格式，您可以在 javascript 中执行此操作

// set a common class for both id
$('.datepicker').datepicker({
  dateFormat: 'yy-mm-dd'
});

var myDataTable = $('#myDataTable').DataTable({
  dom: 'Bfrtip',
  "oSearch": {"bSmart": false},
  processing: true,
  serverSide: true,
  ajax: {
    url: "{{ route('leadData') }}",
    type: 'GET',
    data: function (d) {
      // read start date from the element
      d.from = $('#startDate').val();
      // read end date from the element
      d.to = $('#endDate').val();
    }
  },
  columns: [
  {data: 'first_name', name: 'first_name'},
  {data: 'last_name', name: 'last_name'},
  {data: 'number', name: 'number'},
  {data: 'email', name: 'email'},
  {data: 'studio_id', name: 'studio_id'},
  {data: 'created_at', name: 'created_at'},
  ],
});

// set on change date picker
$('.datepicker').on('change', function() {
  var from = $("#startDate").val();
  var to = $("#endDate").val();
  if(from && to) {
    myDataTable.draw();
  }
});

你可以这样使用的服务器端

$startDate = $request->get('from');
$endDate = $request->get('to');

$query = Lead::with('studio');

if($startDate && $endDate) {
    $query->whereDate('lead.created_at', '>=', $startDate)
    ->whereDate('lead.created_at', '<=', $endDate);
}

$leads = $query->get();

【讨论】：