Laravel使用Yajra使用Ajax jQuery数据表进行日期范围搜索

时间:2019-02-25 12:41:03

标签: javascript laravel datatables

在本教程中,我完成了在Laravel中制作CRUD系统后,尝试进行日期范围搜索: https://www.webslesson.info/2018/02/delete-or-remove-mysql-data-in-laravel-using-ajax.html

此后,我看了本教程: https://www.webslesson.info/2019/02/laravel-date-range-search-using-ajax-jquery.html

问题是我无法在第一个教程中实现。

我首先认为是将其集成到AjaxdataController

的此功能中
    function getdata()
{
 $students = Student::select('id', 'first_name', 'last_name');
 return Datatables::of($students)
        ->addColumn('action', function($student){
            return '<a href="#" class="btn btn-xs btn-primary edit" id="'.$student->id.'"><i class="glyphicon glyphicon-edit"></i> Edit</a><a href="#" class="btn btn-xs btn-danger delete" id="'.$student->id.'"><i class="glyphicon glyphicon-remove"></i> Delete</a>';
        })
        ->addColumn('checkbox', '<input type="checkbox" name="student_checkbox[]" class="student_checkbox" value="{{$id}}" />')
        ->rawColumns(['checkbox','action'])
        ->make(true);
}

但是我有这个:

function fetch_data(Request $request)
{
 if($request->ajax())
 {
  if($request->from_date != '' && $request->to_date != '')
  {
   $data = DB::table('students')
     ->whereBetween('created_at', array($request->from_date, $request->to_date))
     ->get();
  }
  else
  {
   $data = DB::table('students')->orderBy('created_at', 'desc')->get();
  }
  echo json_encode($data);
 }
}

在查看文件中,我具有脚本:

<script>
$(document).ready(function(){

 var date = new Date();

 $('.input-daterange').datepicker({
  todayBtn: 'linked',
  format: 'yyyy-mm-dd',
  autoclose: true
 });

 var _token = $('input[name="_token"]').val();

 fetch_data();

 function fetch_data(from_date = '', to_date = '')
 {
  $.ajax({
   url:"{{ route('daterange.fetch_data') }}",
   method:"POST",
   data:{from_date:from_date, to_date:to_date, _token:_token},
   dataType:"json",
   success:function(data)
   {
    var output = '';
    $('#total_records').text(data.length);
    for(var count = 0; count < data.length; count++)
    {
     output += '<tr>';
     output += '<td>' + data[count].first_name + '</td>';
     output += '<td>' + data[count].last_name + '</td>';
     output += '<td>' + data[count].created_at + '</td></tr>';
    }
    $('tbody').html(output);
   }
  })
 }






 $('#filter').click(function(){
  var from_date = $('#from_date').val();
  var to_date = $('#to_date').val();
  if(from_date != '' &&  to_date != '')
  {
   fetch_data(from_date, to_date);
  }
  else
  {
   alert('Both Date is required');
  }
 });

 $('#refresh').click(function(){
  $('#from_date').val('');
  $('#to_date').val('');
  fetch_data();
 });


});
</script>

有人可以建议吗?

第二次尝试:

我编辑获取数据功能AjaxdataController

    function getdata(Request $request)
    {
      if($request->start_date != '' && $request->end_date != '')
      {
        $students = Student::whereBetween('created_at', array($request->start_date, $request->end_date));

   } else {
     $students = Student::select('id', 'first_name', 'last_name', 'created_at');
   };
     return Datatables::of($students)
            ->addColumn('action', function($student){
                return '<a href="#" class="btn btn-xs btn-primary edit" id="'.$student->id.'"><i class="glyphicon glyphicon-edit"></i> Edit</a><a href="#" class="btn btn-xs btn-danger delete" id="'.$student->id.'"><i class="glyphicon glyphicon-remove"></i> Delete</a>';
            })
            ->addColumn('checkbox', '<input type="checkbox" name="student_checkbox[]" class="student_checkbox" value="{{$id}}" />')
            ->rawColumns(['checkbox','action'])
            ->make(true);
    }

和ajaxdata.blade.php:

  var date = new Date();

  $('.input-daterange').datepicker({
   todayBtn: 'linked',
   format: 'yyyy-mm-dd',
   autoclose: true
  });

  var _token = $('input[name="_token"]').val();

  getdata();
  function getdata(start_date='', end_date='')
   {
     $('#student_table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
                  url:"{{ route('ajaxdata.getdata') }}",
                  type:"POST",
                  data:{
                   start_date:start_date, end_date:end_date, _token:_token
                  }
                 },
        "columns":[
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "created_at" },
            { "data": "action", orderable:false, searchable: false},
            { "data":"checkbox", orderable:false, searchable:false}
        ]
     });
   }

$('#search').click(function(){
 var start_date = $('#start_date').val();
 var end_date = $('#end_date').val();
 if(start_date != '' &&  end_date != '')
 {
  $('#student_table').DataTable().destroy();
  getdata(start_date, end_date);
 }
 else
 {
  alert('Both Date is required');
 }
});

有错误

POST http://laravel.localhost/ajaxdata/getdata 405 (Method Not Allowed)

0 个答案:

没有答案