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分頁的場景，這個分頁類並不能滿足，需要自己去完成完整的前后台分頁代碼。