ThinkPHP5之Ajax分页

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

前端Ajax：

   
    {volist name="paging" id="value"}
     

          
           {if condition="$value eq '0'"}首页
               {else/}{$value}
            {/if}
             
          
     {/volist}

Ajax部分

后台进行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也贴出来。

   {foreach name="res" item="res"}
    
    {/foreach}
    

  

    

      
编号
      
类别
      
描述
      
级别
      
操作
  
  

      
{$res['id']}
      
{$res['name']}
      
{$res['descr']}
      

        {if condition="$res.status eq 4"}超级管理员
            {else /} 管理员
        {/if}
      
      

        {if condition="$res.status eq 4"}ROOT
            {else/} 修改
        {/if}
        {if condition="$res.status eq 4"}ROOT
          {else/}|
        {/if}
        分配节点
        
    

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