整合Booststrap分页样式和ThinkPHP分页类

时间：2014-10-01

分页类修改内容：只涉及到样子生成部分代码，在原来每个A链接前加了li，在返回的样式字符串前加UL，以适合Boostrap的css文件的定义。

Bootstrap的css文件基本保持原状，只是加了一个#lastspan的样式定义。
--------------------------------------------------------------------------------

pagination.css

 

[css] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. .pagination {  
  2.   margin: 20px 0;  
  3. }  
  4. .pagination ul {  
  5.   display: inline-block;  
  6.   list-style:none;  
  7.   *display: inline;  
  8.   /* IE7 inline-block hack */  
  9.   
  10.   *zoom: 1;  
  11.   margin-left: 0;  
  12.   margin-bottom: 0;  
  13.   -webkit-border-radius: 4px;  
  14.   -moz-border-radius: 4px;  
  15.   border-radius: 4px;  
  16.   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);  
  17.   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);  
  18.   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);  
  19. }  
  20. .pagination ul > li {  
  21.   display: inline;  
  22. }  
  23. .pagination ul > li > a,  
  24. .pagination ul > li > span,  
  25. .pagination #lastspan {  
  26.   float: left;  
  27.   padding: 4px 12px;  
  28.   line-height: 20px;  
  29.   text-decoration: none;  
  30.   background-color: #ffffff;  
  31.   border: 1px solid #dddddd;  
  32.   border-left-width: 0;  
  33. }  
  34. .pagination ul > li > a:hover,  
  35. .pagination ul > li > a:focus,  
  36. .pagination ul > .active > a,  
  37. .pagination ul > .active > span {  
  38.   background-color: #f5f5f5;  
  39. }  
  40. .pagination ul > .active > a,  
  41. .pagination ul > .active > span {  
  42.   color: #999999;  
  43.   cursor: default;  
  44. }  
  45. .pagination ul > .disabled > span,  
  46. .pagination ul > .disabled > a,  
  47. .pagination ul > .disabled > a:hover,  
  48. .pagination ul > .disabled > a:focus {  
  49.   color: #999999;  
  50.   background-color: transparent;  
  51.   cursor: default;  
  52. }  
  53. .pagination ul > li:first-child > a,  
  54. .pagination ul > li:first-child > span {  
  55.   border-left-width: 1px;  
  56.   -webkit-border-top-left-radius: 4px;  
  57.   -moz-border-radius-topleft: 4px;  
  58.   border-top-left-radius: 4px;  
  59.   -webkit-border-bottom-left-radius: 4px;  
  60.   -moz-border-radius-bottomleft: 4px;  
  61.   border-bottom-left-radius: 4px;  
  62. }  
  63. .pagination ul > li:last-child > a,  
  64. .pagination ul > li:last-child > span,  
  65. .pagination #lastspan {  
  66.   -webkit-border-top-right-radius: 4px;  
  67.   -moz-border-radius-topright: 4px;  
  68.   border-top-right-radius: 4px;  
  69.   -webkit-border-bottom-right-radius: 4px;  
  70.   -moz-border-radius-bottomright: 4px;  
  71.   border-bottom-right-radius: 4px;  
  72. }  
  73. .pagination-centered {  
  74.   text-align: center;  
  75. }  
  76. .pagination-right {  
  77.   text-align: right;  
  78. }  
  79. .pagination-large ul > li > a,  
  80. .pagination-large ul > li > span,  
  81. .pagination-large #lastspan{  
  82.   padding: 11px 19px;  
  83.   font-size: 17.5px;  
  84. }  
  85. .pagination-large ul > li:first-child > a,  
  86. .pagination-large ul > li:first-child > span {  
  87.   -webkit-border-top-left-radius: 6px;  
  88.   -moz-border-radius-topleft: 6px;  
  89.   border-top-left-radius: 6px;  
  90.   -webkit-border-bottom-left-radius: 6px;  
  91.   -moz-border-radius-bottomleft: 6px;  
  92.   border-bottom-left-radius: 6px;  
  93. }  
  94. .pagination-large ul > li:last-child > a,  
  95. .pagination-large ul > li:last-child > span,  
  96. .pagination-large #lastspan {  
  97.   -webkit-border-top-right-radius: 6px;  
  98.   -moz-border-radius-topright: 6px;  
  99.   border-top-right-radius: 6px;  
  100.   -webkit-border-bottom-right-radius: 6px;  
  101.   -moz-border-radius-bottomright: 6px;  
  102.   border-bottom-right-radius: 6px;  
  103. }  
  104. .pagination-mini ul > li:first-child > a,  
  105. .pagination-small ul > li:first-child > a,  
  106. .pagination-mini ul > li:first-child > span,  
  107. .pagination-small ul > li:first-child > span {  
  108.   -webkit-border-top-left-radius: 3px;  
  109.   -moz-border-radius-topleft: 3px;  
  110.   border-top-left-radius: 3px;  
  111.   -webkit-border-bottom-left-radius: 3px;  
  112.   -moz-border-radius-bottomleft: 3px;  
  113.   border-bottom-left-radius: 3px;  
  114. }  
  115. .pagination-mini ul > li:last-child > a,  
  116. .pagination-small ul > li:last-child > a,  
  117. .pagination-mini ul > li:last-child > span,  
  118. .pagination-small ul > li:last-child > span {  
  119.   -webkit-border-top-right-radius: 3px;  
  120.   -moz-border-radius-topright: 3px;  
  121.   border-top-right-radius: 3px;  
  122.   -webkit-border-bottom-right-radius: 3px;  
  123.   -moz-border-radius-bottomright: 3px;  
  124.   border-bottom-right-radius: 3px;  
  125. }  
  126. .pagination-small ul > li > a,  
  127. .pagination-small ul > li > span {  
  128.   padding: 2px 10px;  
  129.   font-size: 11.9px;  
  130. }  
  131. .pagination-mini ul > li > a,  
  132. .pagination-mini ul > li > span {  
  133.   padding: 0 6px;  
  134.   font-size: 10.5px;  
  135. }  

-------------------------------------------------------------------------------
Page.class.php

 

 

[php] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. <?php  
  2. // +----------------------------------------------------------------------  
  3. // | ThinkPHP [ WE CAN DO IT JUST THINK IT ]  
  4. // +----------------------------------------------------------------------  
  5. // | Copyright (c) 2009 http://thinkphp.cn All rights reserved.  
  6. // +----------------------------------------------------------------------  
  7. // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )  
  8. // +----------------------------------------------------------------------  
  9. // | Author: liu21st <liu21st@gmail.com>  
  10. // |         lanfengye <zibin_5257@163.com>  
  11. // +----------------------------------------------------------------------  
  12. class Page {  
  13.       
  14.     // 分页栏每页显示的页数  
  15.     public $rollPage = 5;  
  16.     // 页数跳转时要带的参数  
  17.     public $parameter  ;  
  18.     // 分页URL地址  
  19.     public $url     =   '';  
  20.     // 默认列表每页显示行数  
  21.     public $listRows = 20;  
  22.     // 起始行数  
  23.     public $firstRow    ;  
  24.     // 分页总页面数  
  25.     protected $totalPages  ;  
  26.     // 总行数  
  27.     protected $totalRows  ;  
  28.     // 当前页数  
  29.     protected $nowPage    ;  
  30.     // 分页的栏的总页数  
  31.     protected $coolPages   ;  
  32.     // 分页显示定制  
  33.     protected $config  =    array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'<span id="lastspan">最后一页</span>','theme'=>'<ul><li><span> %totalRow% %header% %nowPage%/%totalPage% 页</span></li> %first%  %upPage% %prePage%  %linkPage% %downPage%  %nextPage% %end%</ul>');  
  34.     // 默认分页变量名  
  35.     protected $varPage;  
  36.     /** 
  37.      * 架构函数 
  38.      * @access public 
  39.      * @param array $totalRows  总的记录数 
  40.      * @param array $listRows  每页显示记录数 
  41.      * @param array $parameter  分页跳转的参数 
  42.      */  
  43.     public function __construct($totalRows,$listRows='',$parameter='',$url='') {  
  44.         $this->totalRows    =   $totalRows;  
  45.         $this->parameter    =   $parameter;  
  46.         $this->varPage      =   C('VAR_PAGE') ? C('VAR_PAGE') : 'p' ;  
  47.         if(!empty($listRows)) {  
  48.             $this->listRows =   intval($listRows);  
  49.         }  
  50.         $this->totalPages   =   ceil($this->totalRows/$this->listRows);     //总页数  
  51.         $this->coolPages    =   ceil($this->totalPages/$this->rollPage);  
  52.         $this->nowPage      =   !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;  
  53.         if($this->nowPage<1){  
  54.             $this->nowPage  =   1;  
  55.         }elseif(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {  
  56.             $this->nowPage  =   $this->totalPages;  
  57.         }  
  58.         $this->firstRow     =   $this->listRows*($this->nowPage-1);  
  59.         if(!empty($url))    $this->url  =   $url;   
  60.     }  
  61.     public function setConfig($name,$value) {  
  62.         if(isset($this->config[$name])) {  
  63.             $this->config[$name]    =   $value;  
  64.         }  
  65.     }  
  66.     /** 
  67.      * 分页显示输出 
  68.      * @access public 
  69.      */  
  70.     public function show() {  
  71.         if(0 == $this->totalRows) return '';  
  72.         $p              =   $this->varPage;  
  73.         $nowCoolPage    =   ceil($this->nowPage/$this->rollPage);  
  74.         // 分析分页参数  
  75.         if($this->url){  
  76.             $depr       =   C('URL_PATHINFO_DEPR');  
  77.             $url        =   rtrim(U('/'.$this->url,'',false),$depr).$depr.'__PAGE__';  
  78.         }else{  
  79.             if($this->parameter && is_string($this->parameter)) {  
  80.                 parse_str($this->parameter,$parameter);  
  81.             }elseif(is_array($this->parameter)){  
  82.                 $parameter      =   $this->parameter;  
  83.             }elseif(empty($this->parameter)){  
  84.                 unset($_GET[C('VAR_URL_PARAMS')]);  
  85.                 $var =  !empty($_POST)?$_POST:$_GET;  
  86.                 if(empty($var)) {  
  87.                     $parameter  =   array();  
  88.                 }else{  
  89.                     $parameter  =   $var;  
  90.                 }  
  91.             }  
  92.             $parameter[$p]  =   '__PAGE__';  
  93.             $url            =   U('',$parameter);  
  94.         }  
  95.         //上下翻页字符串  
  96.         $upRow          =   $this->nowPage-1;  
  97.         $downRow        =   $this->nowPage+1;  
  98.         if ($upRow>0){  
  99.             $upPage     =    "<li><a href='".str_replace('__PAGE__',$upRow,$url)."'>".$this->config['prev']."</a></li>";  
  100.         }else{  
  101.             $upPage     =    '';  
  102.         }  
  103.         if ($downRow <= $this->totalPages){  
  104.             $downPage   =   "<li><a href='".str_replace('__PAGE__',$downRow,$url)."'>".$this->config['next']."</a></li>";  
  105.         }else{  
  106.             $downPage   =   '';  
  107.         }  
  108.         // << < > >>  
  109.         if($nowCoolPage == 1){  
  110.             $theFirst   =   '';  
  111.             $prePage    =   '';  
  112.         }else{  
  113.             $preRow     =   $this->nowPage-$this->rollPage;  
  114.             $prePage    =   "<li><a href='".str_replace('__PAGE__',$preRow,$url)."' >上".$this->rollPage."页</a></li>";  
  115.             $theFirst   =   "<li><a href='".str_replace('__PAGE__',1,$url)."' >".$this->config['first']."</a></li>";  
  116.         }  
  117.         if($nowCoolPage == $this->coolPages){  
  118.             $nextPage   =   '';  
  119.             $theEnd     =   '';  
  120.         }else{  
  121.             $nextRow    =   $this->nowPage+$this->rollPage;  
  122.             $theEndRow  =   $this->totalPages;  
  123.             $nextPage   =   "<li><a href='".str_replace('__PAGE__',$nextRow,$url)."' >下".$this->rollPage."页</a></li>";  
  124.             $theEnd     =   "</li><a href='".str_replace('__PAGE__',$theEndRow,$url)."' >".$this->config['last']."</a></li>";  
  125.         }  
  126.         // 1 2 3 4 5  
  127.         $linkPage = "";  
  128.         for($i=1;$i<=$this->rollPage;$i++){  
  129.             $page       =   ($nowCoolPage-1)*$this->rollPage+$i;  
  130.             if($page!=$this->nowPage){  
  131.                 if($page<=$this->totalPages){  
  132.                     $linkPage .= "<li><a href='".str_replace('__PAGE__',$page,$url)."'>".$page."</a></li>";  
  133.                 }else{  
  134.                     break;  
  135.                 }  
  136.             }else{  
  137.                 if($this->totalPages != 1){  
  138.                     $linkPage .= "<li><span class='current'>".$page."</span></li>";  
  139.                 }  
  140.             }  
  141.         }  
  142.         $pageStr     =   str_replace(  
  143.             array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),  
  144.             array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);  
  145.         return $pageStr;  
  146.     }  
  147. }  

------------------------------------------------------------------------------
模板中使用：

 

<div class="pagination">{$page}</div> //基本样式
<div class="pagination pagination-large">{$page}</div>//大号数字样式

 

控制类代码：

 

[php] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. $p = new Page ($count,10);     
  2.         $products = $this->product_model->where($where)->order($order.' '.$method)->limit($p->firstRow.','.$p->listRows)->select();  
  3.         $page = $p->show ();     
  4.               
  5.         $this->assign( "page", $page );  

上一篇：Bootstrap3.0入门学习系列：学习从现在开始 下一篇：HTML5开发手机网页响应式移动端，Bootstrap框架的应

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权