使ThinkPHP(3.2.3)的分頁類支持Bootstrap風格


ThinkPHP 3.2.3自帶的分頁類位於:/ThinkPHP/Library/Think/Pages.class.php ,官方文檔在這里:ThinkPHP3.2.3數據分頁
Pages.class.php源碼:

<?php
// +----------------------------------------------------------------------
// | ThinkPHP [ WE CAN DO IT JUST THINK IT ]
// +----------------------------------------------------------------------
// | Copyright (c) 2006-2014 http://thinkphp.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: 麥當苗兒 <zuojiazi@vip.qq.com> <http://www.zjzit.cn>
// +----------------------------------------------------------------------
namespace Think;

class Page{
    public $firstRow; // 起始行數
    public $listRows; // 列表每頁顯示行數
    public $parameter; // 分頁跳轉時要帶的參數
    public $totalRows; // 總行數
    public $totalPages; // 分頁總頁面數
    public $rollPage   = 11;// 分頁欄每頁顯示的頁數
	public $lastSuffix = true; // 最后一頁是否顯示總頁數

    private $p       = 'p'; //分頁參數名
    private $url     = ''; //當前鏈接URL
    private $nowPage = 1;

	// 分頁顯示定制
    private $config  = array(
        'header' => '<span class="rows">共 %TOTAL_ROW% 條記錄</span>',
        'prev'   => '<<',
        'next'   => '>>',
        'first'  => '1...',
        'last'   => '...%TOTAL_PAGE%',
        'theme'  => '%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%',
    );

    /**
     * 架構函數
     * @param array $totalRows  總的記錄數
     * @param array $listRows  每頁顯示記錄數
     * @param array $parameter  分頁跳轉的參數
     */
    public function __construct($totalRows, $listRows=20, $parameter = array()) {
        C('VAR_PAGE') && $this->p = C('VAR_PAGE'); //設置分頁參數名稱
        /* 基礎設置 */
        $this->totalRows  = $totalRows; //設置總記錄數
        $this->listRows   = $listRows;  //設置每頁顯示行數
        $this->parameter  = empty($parameter) ? $_GET : $parameter;
        $this->nowPage    = empty($_GET[$this->p]) ? 1 : intval($_GET[$this->p]);
        $this->nowPage    = $this->nowPage>0 ? $this->nowPage : 1;
        $this->firstRow   = $this->listRows * ($this->nowPage - 1);
    }

    /**
     * 定制分頁鏈接設置
     * @param string $name  設置名稱
     * @param string $value 設置值
     */
    public function setConfig($name,$value) {
        if(isset($this->config[$name])) {
            $this->config[$name] = $value;
        }
    }

    /**
     * 生成鏈接URL
     * @param  integer $page 頁碼
     * @return string
     */
    private function url($page){
        return str_replace(urlencode('[PAGE]'), $page, $this->url);
    }

    /**
     * 組裝分頁鏈接
     * @return string
     */
    public function show() {
        if(0 == $this->totalRows) return '';

        /* 生成URL */
        $this->parameter[$this->p] = '[PAGE]';
        $this->url = U(ACTION_NAME, $this->parameter);
        /* 計算分頁信息 */
        $this->totalPages = ceil($this->totalRows / $this->listRows); //總頁數
        if(!empty($this->totalPages) && $this->nowPage > $this->totalPages) {
            $this->nowPage = $this->totalPages;
        }

        /* 計算分頁臨時變量 */
        $now_cool_page      = $this->rollPage/2;
		$now_cool_page_ceil = ceil($now_cool_page);
		$this->lastSuffix && $this->config['last'] = $this->totalPages;

        //上一頁
        $up_row  = $this->nowPage - 1;
        $up_page = $up_row > 0 ? '<a class="prev" href="' . $this->url($up_row) . '">' . $this->config['prev'] . '</a>' : '';

        //下一頁
        $down_row  = $this->nowPage + 1;
        $down_page = ($down_row <= $this->totalPages) ? '<a class="next" href="' . $this->url($down_row) . '">' . $this->config['next'] . '</a>' : '';

        //第一頁
        $the_first = '';
        if($this->totalPages > $this->rollPage && ($this->nowPage - $now_cool_page) >= 1){
            $the_first = '<a class="first" href="' . $this->url(1) . '">' . $this->config['first'] . '</a>';
        }

        //最后一頁
        $the_end = '';
        if($this->totalPages > $this->rollPage && ($this->nowPage + $now_cool_page) < $this->totalPages){
            $the_end = '<a class="end" href="' . $this->url($this->totalPages) . '">' . $this->config['last'] . '</a>';
        }

        //數字連接
        $link_page = "";
        for($i = 1; $i <= $this->rollPage; $i++){
			if(($this->nowPage - $now_cool_page) <= 0 ){
				$page = $i;
			}elseif(($this->nowPage + $now_cool_page - 1) >= $this->totalPages){
				$page = $this->totalPages - $this->rollPage + $i;
			}else{
				$page = $this->nowPage - $now_cool_page_ceil + $i;
			}
            if($page > 0 && $page != $this->nowPage){

                if($page <= $this->totalPages){
                    $link_page .= '<a class="num" href="' . $this->url($page) . '">' . $page . '</a>';
                }else{
                    break;
                }
            }else{
                if($page > 0 && $this->totalPages != 1){
                    $link_page .= '<span class="current">' . $page . '</span>';
                }
            }
        }

        //替換分頁內容
        $page_str = str_replace(
            array('%HEADER%', '%NOW_PAGE%', '%UP_PAGE%', '%DOWN_PAGE%', '%FIRST%', '%LINK_PAGE%', '%END%', '%TOTAL_ROW%', '%TOTAL_PAGE%'),
            array($this->config['header'], $this->nowPage, $up_page, $down_page, $the_first, $link_page, $the_end, $this->totalRows, $this->totalPages),
            $this->config['theme']);
        return "<div>{$page_str}</div>";
    }
}


調用Page類的show()方法后,返回的是拼接好的分頁HTML信息。注意到這里提供了theme可供配置,利用theme可以改變返回的HTML信息樣式。
以theme為"%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%"為例,返回的是(格式化顯示):

<div>
    <a class="first" href="xxx">xxx</a>
    <a class="prev" href="xxx">xxx</a>
    <a class="num" href="xxx">xxx</a>
    <span class="current" href="xxx">xxx</span>
    <a class="next" href="xxx">xxx</a>
    <a class="end" href="xxx">xxx</a>
</div>

在看Bootstrap的分頁組件:

  <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>

可以看出,對於默認分頁組件,只要在外層套上ul.pagination,並將每一項套上li就行。
那么設置theme為:

"<ul class="pagination"><li>%FIRST%</li><li>%UP_PAGE%</li><li>%LINK_PAGE%</li><li>%DOWN_PAGE%</li><li>%END%</li></ul>"

就可以得到返回值(格式化顯示):

<div>
    <ul class="pagination">
        <li><a class="first" href="xxx">xxx</a></li>
        <li><a class="prev" href="xxx">xxx</a></li>
        <li>
            <a class="num" href="xxx">xxx</a>
            <span class="current" href="xxx">xxx</span>
        </li>
        <li><a class="next" href="xxx">xxx</a></li>
        <li><a class="end" href="xxx">xxx</a></li>
    </ul>
</div>

最終效果如圖:

采用配置theme可以不改變源碼的情況下做到bootstrap默認分頁風格。其他風格的需要對源碼進行修改或自定義css風格。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM