laravel分页查询

laravel分页查询

1.1现在bootstrap的组件中引用样式

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

然后更改li标签的数量，根据查出的页数来进行添加li

//渲染页数
 function pageCount(count){
  //清空原有的li标签
  $(".pagination li").remove();
  //上一页
  var pove=`<li class="pove">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>`;
 $(".pagination").append(pove);
  for(var i=1;i<=count;i++){
   if(i==page){
    var li=`<li class="active" data-page="${i}"><a href="#">${i} <span class="sr-only">(current)</span></a></li>`;
   }else{
    var li=`<li data-page="${i}"><a href="#">${i}</a></li>`
   }
   
   $(".pagination").append(li);
  }
  //下一页
  var next=`<li class="next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>`;
 $(".pagination").append(next);
 }

在前端页面命名一个变量（当前页数）为1，然后通过ajax连接控制器

//声明变量，表示当前页码
 var page=1;
 load();
 function load(){
  $("nav").fadeOut(500);
  $("tbody tr").remove();
  $.ajax({
   url:"http://127.0.0.1:8000/posts?page="+page,
   type:"get",
   dataType:"json",
   success:function(res){
    // console.log(res);
    //渲染表格数据
    $(res.data).each(function(k,v){
     var tr=`<tr>
        <td><a href="xiang.html?id=${v.id}"">${v.id}</a></td>
        <td><a href="xiang.html?id=${v.id}">${v.title}</a></td>
        <td>
        <a href="#" class="btn btn-info edit" data-code="${v.id}">编辑</a>
        <a href="#" class="btn btn-danger del" data-id="${v.id}">删除</a>
        </td>
       </tr>`
       $('tbody').append(tr);
    })
    //显示分页
    $("nav").fadeIn(500);
    //渲染页数
    pageCount(res.count);
   }
  })
 } 

1.2修改路由和控制器的代码

use Illuminate\Support\Facades\Route;
//展示文章数据
Route::get('/posts','PostController@index');

执行控制器PostController中的index方法
在PostController类中定义两个属性

//每页显示的数据数
 private $pageSize=3;
 //数据总页数
 private $pageCount=0;

编写index方法和count方法

public function index(){
  // $res=Post::all()->sortBy('id')->values()->all();
  /**
   * $Page=页码
   * $pageSize=每页显示的行数
   * $skip的参数的值=（$page-1）*$pageSize
   * take的参数的值=$pageSize
   */
  $page=request('page');
  $start=($page-1)*$this->pageSize;
  $res=Post::skip($start)->take($this->pageSize)->get();
  //获取总页数
  $this->PageCount();
  return response()->json([
   'data'=>$res,
   'count'=>$this->pageCount
  ]);
 }
 //总页数
 public function PageCount(){
  $count=Post::all()->count();
  $this->pageCount=$count%$this->pageSize==0?$count/$this->pageSize:floor($count/$this->pageSize)+1;
 }

1.3在静态页面实现点击对应的li标签出现对应的页面

$(".pagination").on('click','li',function(event){
  //阻止默认刷新
  event.preventDefault();
  page=$(this).data('page');
  load();
 })

可查看laravel中文文档中的分页