thinkphp结合bootstrap打造个性化分页

分页功能是web开发中常见的一项功能，也存在很多形式，这里主要讲一下利用thinkPHP框架的page类来打造一款bootstrap风格的分页过程。

首先需要去thinkPHP官网现在其分页扩展类http://www.thinkphp.cn/extend/241.html，下载完成后，需要将其放在项目中的ThinkPHP/Extend/Library/ORG/Util/目录下，如果没有这个目录，需要自己进行创建，引入后代码结构如下：

如果直接按照官网的教程进行分页，那么出来的效果仅仅是显示一个简单的不带任何样式的连接加文字，这显然是不符合项目要求的。

这里介绍下如何制bootstrap风格的分页效果。由于该分页类输出分页的内容是div里面加连接的形式，而bootstrap采用的分页代码是nav下面ul+li+a的形式，所以需要修改分页类。

1.使用EditPlus（或其他带有行号显示的IDE）打开page.calss.php,需要修改如下地方：

 protected $config  =    array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' <span style="font-size:18px; padding-top: 5px;
height: 30px;padding-left: 5px;display: inline-block;">%totalRow% %header% %nowPage%/%totalPage% 页</span> %upPage% %downPage% %first%  %prePage%  %linkPage%  %nextPage% %end%');

首先在34行，修改默认的theme如上，将输出的文字信息包裹在一个span中，并如上给其添加样式，这样做是由于默认输出的文字信息样式不符合要求，需要修改，这个操作可以通过setConfig方法来完成，但是不建议这样做，因为theme进行setCongfig代码量较大，每次在代码中调用显然很冗余，建议直接修改这个分页类；

2.

 if ($upRow>0){
            $upPage     =   " <li><a href='".str_replace('__PAGE__',$upRow,$url)."'>".$this->config['prev']."</a></li>";
        }else{
            $upPage     =   '';
        }

        if ($downRow <= $this->totalPages){
            $downPage   =   "<li><a href='".str_replace('__PAGE__',$downRow,$url)."'>".$this->config['next']."</a></li>";
        }else{
            $downPage   =   '';
        }
        // << < > >>
        if($nowCoolPage == 1){
            $theFirst   =   '';
            $prePage    =   '';
        }else{
            $preRow     =   $this->nowPage-$this->rollPage;
            $prePage    =   "<li><a href='".str_replace('__PAGE__',$preRow,$url)."' >上".$this->rollPage."页</a></li>";
            $theFirst   =   "<li><a href='".str_replace('__PAGE__',1,$url)."' >".$this->config['first']."</a></li>";
        }
        if($nowCoolPage == $this->coolPages){
            $nextPage   =   '';
            $theEnd     =   '';
        }else{
            $nextRow    =   $this->nowPage+$this->rollPage;
            $theEndRow  =   $this->totalPages;
            $nextPage   =   "<li><a href='".str_replace('__PAGE__',$nextRow,$url)."' >下".$this->rollPage."页</a></li>";
            $theEnd     =   "<li><a href='".str_replace('__PAGE__',$theEndRow,$url)."' >".$this->config['last']."</a></li>";
        }
        // 1 2 3 4 5
        $linkPage = "";
        for($i=1;$i<=$this->rollPage;$i++){
            $page       =   ($nowCoolPage-1)*$this->rollPage+$i;
            if($page!=$this->nowPage){
                if($page<=$this->totalPages){
                    $linkPage .= "&nbsp;<li><a href='".str_replace('__PAGE__',$page,$url)."'>&nbsp;".$page."&nbsp;</a></li>";
                }else{
                    break;
                }
            }else{
                if($this->totalPages != 1){

                    $linkPage .= "<li class='active'><a href='#'>".$page."</a></li>";

从99行开始到141行结束，将所有输出的a标签按照如上方式更改，将每一个a标签都包裹在li中，便于客户端调用；

以上page类算是修改完成,接下来需要在页面中进行调用

页面调用前台代码为：

首先在页面中要引入bootstrap的css文件，

<link href="__APP__/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">

然后在模板中如下调用：

 <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th></th>
                <th>用户名</th>
                <th>密码</th>
                <th>电话号码</th>
                <th>电子邮件</th>
                <th>所属园区ID</th>
                <th>可访问摄像头列表</th>
                <th>注册时间</th>
                <th>备注</th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody id="tbuser">
       <volist name="list" id="vo">
          <tr>
          <td><input type="checkbox" name="udCheck"/></td>
          <td>{$vo.userName}</td>
          <td>{$vo.password}</td>
          <td>{$vo.phoneNum}</td>
          <td>{$vo.email}</td>
          <td>{$vo.deptId}</td>
          <td>{$vo.accessCamera}</td>
          <td>{$vo.registerTime}</td>
          <td>{$vo.memo}</td>
          <td><a href='#'  onclick="deleteUser('{$vo.userName}',this);" class="btn btn-danger btn-sm">删除</a></td>
         <td><a href='/yunmu/Index/edit/id/{$vo.userName}' class="btn btn-primary btn-sm" >编辑</a></td>
        </volist>

            </tbody>
          </table>
        <nav style="text-align:center;" >
           <ul class="pagination">

          {$page}
           </ul>
      </nav>

        </div>

注意这里设置nav的样式是为了让其居中显示，pagination是bootstrap中自带的一个分页的css class，{$page}是后台传递给模板的输出的内容，

以上是前台代码的调用，后台PHP代码需要在显示的地方添加如下代码：

            import('ORG.Util.Page');// 导入分页类
            $count= $User->where($condition)->count();// 查询满足要求的总记录数
            $Page=new Page($count,10);// 实例化分页类 传入总记录数,每页显示10条记录
            $show=$Page->show();// 分页显示输出
            $list = $User->where($condition)->order('userName')->limit($Page->firstRow.','.$Page->listRows)->select();
            $this->assign('list',$list);// 赋值数据集
            $this->assign('page',$show);// 赋值分页输出
            $this->display(); // 输出模板

其中$condition是你自定义的查询条件，$Page=new Page($count,10)表示实例化分页类并且一页显示10行数据，然后调用其show方法返回输出内容，再将其
传递给前台模板。

以上步骤完成之后，这个分页功能已经基本完成，效果如下：

以上采用其框架分页类的方式仅适合于表单提交查询（即页面整体跳转刷新）的分页，因为它对分页数据的控制是通过在URL尾部添加参数如p=1这种方式来实现的，所以实际上每次查询数据的分页你都得保证它能够获取完整的查询参数，否则可能点击第二页或者下一页的时候查询出来的结果就不是之前的结果了。建议将所有查询修改为采用get表单提交的方式。对于逻辑较为复杂或者需要采用ajax分页的场景，这个分页类并不能满足，需要自己去完成完整的前后台分页代码。