如何在Laravel 8中使用ajax实现分页和实时搜索？

Question

我想实现与现场搜索分页。我的实时搜索正在工作，但当我点击第2页时，我总是看到第1页的数据。我不知道如何正确地实现分页，这样在点击其他页面后，我会发现不同的数据。

这是我想要实现分页和实时搜索的index.blade.php。

@extends('layout.master')
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('content')

<br>
<div class="br-pagebody">
   <div class="br-section-wrapper">
       @include('include._message')
   <div class="row">
       <h6 class="br-section-label">Doctors List</h6>
   </div>
     <div class="row">
         <div class="col-lg-4 ">
          <div class="form-group">
            <input type="text" name="search" id="search" class="form-control" placeholder="Search doctor Data" />
           </div>
         </div>



         <div class="col-lg-3 offset-lg-5">
             <a href="{{route('doctors.create')}}" class="btn btn-primary" style="margin-left: 35px">Add New Doctor</a>
         </div>
     </div>

   </br>
     
   <div class="table-responsive">
    <table class="table table-bordered table-colored table-dark">
      <thead class="thead-colored thead-dark">
            <tr>
                <th>Image</th>
                <th>Doctor Id</th>
                <th>Name</th>
                <th>Department</th>
                <th>Email</th>
                <th>mobile</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>


        </thead>   
     <tbody>   
     
      </tbody>
    </table> 
    <input type="hidden" name="hidden_page" id="hidden_page" value="1" /> 
    </div><!-- table-wrapper -->
    <div class="d-flex justify-content-left">
      {!! $doctors->links() !!}
  </div>

  </div>
</div>

                      
        
@endsection
@section('js')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


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

 fetch_doctor_data();

 function fetch_doctor_data(query = '')
 {
 
  $.ajax({
   url:"{{route('search.doctor')}}",
   method:"GET",
   data:{'query':query},
   dataType:'json',
   success:function(data)
   {
    
     var output = '';
    if(data.data.length > 0)
    {
     for(var count = 0; count < data.data.length; count++)
     {
     
      output += '<tr>';
      output += '<td class="center"><img src="'+data.data[count].image+'" style="width:40px;height:40px;"/></td>';
      output += '<td>'+data.data[count].id+'</td>';
      output += '<td>'+data.data[count].name+'</td>';
      output += '<td>'+data.data[count].department.name+'</td>';
      output += '<td>'+data.data[count].email+'</td>';
      output += '<td>'+data.data[count].mobile+'</td>';
      output += '<td>'+data.data[count].status+'</td>';
      output += '<td><a class="btn btn-primary" href="doctors/'+data.data[count].id+'/edit"><i class="fas fa-edit">Edit</i></a><button style="margin-left:2px;" class="btn btn-danger delete" value="'+data.data[count].id+'" data-id="'+data.data[count].id+'"><i class="fas fa-trash">Delete</i></button></td>';
      output += '</tr>';
     }
    }
    else
    {
     output += '<tr>';
     output += '<td colspan="8" style="text-align:center">No Data Found</td>';
     output += '</tr>';
    }
    $('tbody').html(output);
   }
   
  })
 }

 $(document).on('keyup', '#search', function(){
  var query = $(this).val();
  fetch_doctor_data(query);
 });

});
</script>
 <script>

$(document).ready(function(){    
  $(document).on("click", ".delete", function() { 
    if(!confirm("Do you really want to do this?")) {
       return false;
     }

        var $element = $(this).parent().parent();
        var id= $(this).val();
       var token = $("meta[name='csrf-token']").attr("content");
      
      console.log(id)
      $.ajax(
      {
          url: "doctors/"+id,
          type: 'delete', 
          data: {
              "id": id ,
              "_token": token,
          },
          success: function (response)
          {
              console.log(response)
              $element.fadeOut().remove(); 
          }
             
        });
         
      });
    });

</script>
     
@endsection

以下是我在控制器中用于实时搜索的函数：

   function liveSearchDoctor(Request $request)
    {
     if($request->ajax())
     {
      $output = '';
      $query = $request->get('query');
      
      if($query != '')
      {
        
        $data =Doctor::
            where('name', 'like', '%'.$query.'%')
            ->orWhere('mobile', 'like', '%'.$query.'%')
            ->orWhere('email', 'like', '%'.$query.'%')
            ->orderBy('id', 'desc')
            ->with('department')
            ->paginate(2);
      
         
      }
      else
      {
        $data =Doctor::with('department')
        ->paginate(2);
      }
}

Answer 1

对于分页，您应该在查询字符串中添加page。在laravel中，当你使用默认分页时，你只需要将page参数传递给url。它还为你提供了更多的额外信息，比如下一页是什么，总共有多少页。

对于问题的技术部分，您可以使用jquery轻松地传递它。还要考虑到，使用Datatable等库可以帮助您编写更少的代码。