ThinkPHP5之Ajax分页_thinkphp5 ajax分页-优快云博客

Ajax分页在项目开发中是一项必备的技能。当我们的数据库数据量比较大的时候使用Ajax分页可以很好的缓解数据库的查询压力。那么Ajax分页如何实现呢？原生SQL分页我们知道需要有偏移量，每页显示的数据条数就可以简单实现。其实Ajax分页原理也一样，当我们在前台点击页码时传递页码在后台，后台进行数据处理即可。本例tp3.2与tp5都适用，话不多说，直接贴代码

前端Ajax：

<div class="dataTables_paginate paging_bootstrap pagination">
   <!-- 输出分页 -->
    {volist name="paging" id="value"}
     <li>
          <a href="javascript:void(0)" onclick="page({$value})">
           {if condition="$value eq '0'"}首页
               {else/}{$value}
            {/if}
             </a>
          </li>
     {/volist}
</div>

Ajax部分

<script>
//分页的Ajax
function page(page){
  $.get("{:url('Role/index')}",{page:page},function(data){
      $("#uid").html(data);
  });
}
</script>

后台进行Ajax的数据分页

public function index()
    {
        $count = Db::query("select count(id) as count from tb_role where is_delete =0");
        $tot = $count[0]['count']; //统计数据总条数
        // dump($tot);exit;
        $limit = 5; //每页显示多少条 
        $total = intval(ceil($tot/$limit)); //进一取整 计算多少页
        $paging = array();
        for ($i=0; $i <=$total; $i++) { 
            $paging[$i] = $i;
        }                              //页码
        $page = isset($_GET['page'])?$_GET['page']:"";
        if(empty($page)){
            $page = 1;
        } //前台传递过来的页码 
        $offset = ($page-1)*$limit; //偏移量
        $res = Db::query("select id,name,descr,status,is_delete from  tb_role limit $offset,$limit"); //SQL
        // dump($res);exit;
        if(request()->isAjax()){  //如果是AJAX请求的分页

            $this->assign('res',$res);
            $this->assign('title','权限管理');
            return $this->fetch('Role/indexAjax');
            exit;
        }
        //非Ajax请求
        $this->assign('paging',$paging);
        $this->assign('res',$res);
        $this->assign('title','权限管理');
        return view();
    }

当然这里我们看到如果是Ajax分页的话后台渲染的模板不一样，其实这里是做的一个判断。当然，大神写的应该比我好。这种方式比较复杂，为了让大家看的明白我将indexAjax.html也贴出来。

<div id="uid">
<table class="table table-striped table-hover table-bordered dataTable" id="editable-sample" aria-describedby="editable-sample_info">
  <thead>
    <tr role="row">
      <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="First Name" style="width: 90px;">编号</th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Last Name: activate to sort column ascending" style="width: 186px;">类别</th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Points: activate to sort column ascending" style="width: 119px;">描述</th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Edit: activate to sort column ascending" style="width: 84px;">级别</th>
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="editable-sample" rowspan="1" colspan="1" aria-label="Delete: activate to sort column ascending" style="width: 124px;text-align:center;">操作</th></tr>
  </thead>
  <tbody role="alert" aria-live="polite" aria-relevant="all">
   {foreach name="res" item="res"}
    <tr class="odd">
      <td class=" ">{$res['id']}</td>
      <td class=" ">{$res['name']}</td>
      <td class=" ">{$res['descr']}</td>
      <td class="center ">
        {if condition="$res.status eq 4"}超级管理员
            {else /} 管理员
        {/if}
      </td>
      <td class=" ">
        {if condition="$res.status eq 4"}ROOT
            {else/} <a href="{:url('Role/edit',['id'=>$res['id']])}" class="btn btn-info btn-xs" {if condition="$res.is_delete eq '1'"/}disabled{/if}>修改</a>
        {/if}
        {if condition="$res.status eq 4"}ROOT
          {else/}<input type="button" onclick="del({$res.id})" class="btn btn-danger btn-xs" id="delete" {if condition="$res.is_delete eq '1'"/}disabled{/if} value="停用">|
        {/if}
        <a href="{:url('Role/nodelist',['id'=>$res['id']])}" class="btn btn-success btn-xs">分配节点</a>
        </td>
    </tr>
    {/foreach}
    </tbody>
</table>
</div>

这里呢，其实就是将index.html中的数据分配部分复制了一份。为什么要这样做呢，因为每次Ajax请求一次，后端返回给我们前端的页码都不一样，对应的数据也就不一样。所以做了这样一步操作。当然，如果是首次访问没有Ajax请求，默认显示的还是index.html。