整合Booststrap分页样式和ThinkPHP分页类
- WBOY原創
- 2016-06-07 11:44:381003瀏覽
相信许多前端高手均能写出漂亮的分页样式，但haran觉得适当“拿来”一次也无妨。
先看效果。
分页类修改内容：只涉及到样子生成部分代码，在原来每个A链接前加了li，在返回的样式字符串前加UL，以适合Boostrap的css文件的定义。
Bootstrap的css文件基本保持原状，只是加了一个#lastspan的样式定义。
--------------------------------------------------------------------------------
pagination.css.pagination {<br>
margin: 20px 0;<br>
}<br>
.pagination ul {<br>
display: inline-block;<br>
list-style:none;<br>
*display: inline;<br>
/* IE7 inline-block hack */<br>
<br>
*zoom: 1;<br>
margin-left: 0;<br>
margin-bottom: 0;<br>
-webkit-border-radius: 4px;<br>
-moz-border-radius: 4px;<br>
border-radius: 4px;<br>
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);<br>
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);<br>
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);<br>
}<br>
.pagination ul > li {<br>
display: inline;<br>
}<br>
.pagination ul > li > a,<br>
.pagination ul > li > span,<br>
.pagination #lastspan {<br>
float: left;<br>
padding: 4px 12px;<br>
line-height: 20px;<br>
text-decoration: none;<br>
background-color: #ffffff;<br>
border: 1px solid #dddddd;<br>
border-left-width: 0;<br>
}<br>
.pagination ul > li > a:hover,<br>
.pagination ul > li > a:focus,<br>
.pagination ul > .active > a,<br>
.pagination ul > .active > span {<br>
background-color: #f5f5f5;<br>
}<br>
.pagination ul > .active > a,<br>
.pagination ul > .active > span {<br>
color: #999999;<br>
cursor: default;<br>
}<br>
.pagination ul > .disabled > span,<br>
.pagination ul > .disabled > a,<br>
.pagination ul > .disabled > a:hover,<br>
.pagination ul > .disabled > a:focus {<br>
color: #999999;<br>
background-color: transparent;<br>
cursor: default;<br>
}<br>
.pagination ul > li:first-child > a,<br>
.pagination ul > li:first-child > span {<br>
border-left-width: 1px;<br>
-webkit-border-top-left-radius: 4px;<br>
-moz-border-radius-topleft: 4px;<br>
border-top-left-radius: 4px;<br>
-webkit-border-bottom-left-radius: 4px;<br>
-moz-border-radius-bottomleft: 4px;<br>
border-bottom-left-radius: 4px;<br>
}<br>
.pagination ul > li:last-child > a,<br>
.pagination ul > li:last-child > span,<br>
.pagination #lastspan {<br>
-webkit-border-top-right-radius: 4px;<br>
-moz-border-radius-topright: 4px;<br>
border-top-right-radius: 4px;<br>
-webkit-border-bottom-right-radius: 4px;<br>
-moz-border-radius-bottomright: 4px;<br>
border-bottom-right-radius: 4px;<br>
}<br>
.pagination-centered {<br>
text-align: center;<br>
}<br>
.pagination-right {<br>
text-align: right;<br>
}<br>
.pagination-large ul > li > a,<br>
.pagination-large ul > li > span,<br>
.pagination-large #lastspan{<br>
padding: 11px 19px;<br>
font-size: 17.5px;<br>
}<br>
.pagination-large ul > li:first-child > a,<br>
.pagination-large ul > li:first-child > span {<br>
-webkit-border-top-left-radius: 6px;<br>
-moz-border-radius-topleft: 6px;<br>
border-top-left-radius: 6px;<br>
-webkit-border-bottom-left-radius: 6px;<br>
-moz-border-radius-bottomleft: 6px;<br>
border-bottom-left-radius: 6px;<br>
}<br>
.pagination-large ul > li:last-child > a,<br>
.pagination-large ul > li:last-child > span,<br>
.pagination-large #lastspan {<br>
-webkit-border-top-right-radius: 6px;<br>
-moz-border-radius-topright: 6px;<br>
border-top-right-radius: 6px;<br>
-webkit-border-bottom-right-radius: 6px;<br>
-moz-border-radius-bottomright: 6px;<br>
border-bottom-right-radius: 6px;<br>
}<br>
.pagination-mini ul > li:first-child > a,<br>
.pagination-small ul > li:first-child > a,<br>
.pagination-mini ul > li:first-child > span,<br>
.pagination-small ul > li:first-child > span {<br>
-webkit-border-top-left-radius: 3px;<br>
-moz-border-radius-topleft: 3px;<br>
border-top-left-radius: 3px;<br>
-webkit-border-bottom-left-radius: 3px;<br>
-moz-border-radius-bottomleft: 3px;<br>
border-bottom-left-radius: 3px;<br>
}<br>
.pagination-mini ul > li:last-child > a,<br>
.pagination-small ul > li:last-child > a,<br>
.pagination-mini ul > li:last-child > span,<br>
.pagination-small ul > li:last-child > span {<br>
-webkit-border-top-right-radius: 3px;<br>
-moz-border-radius-topright: 3px;<br>
border-top-right-radius: 3px;<br>
-webkit-border-bottom-right-radius: 3px;<br>
-moz-border-radius-bottomright: 3px;<br>
border-bottom-right-radius: 3px;<br>
}<br>
.pagination-small ul > li > a,<br>
.pagination-small ul > li > span {<br>
padding: 2px 10px;<br>
font-size: 11.9px;<br>
}<br>
.pagination-mini ul > li > a,<br>
.pagination-mini ul > li > span {<br>
padding: 0 6px;<br>
font-size: 10.5px;<br>
}-------------------------------------------------------------------------------
Page.class.php<?php <br />
// +----------------------------------------------------------------------<br>
// | ThinkPHP [ WE CAN DO IT JUST THINK IT ]<br>
// +----------------------------------------------------------------------<br>
// | Copyright (c) 2009 http://thinkphp.cn All rights reserved.<br>
// +----------------------------------------------------------------------<br>
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )<br>
// +----------------------------------------------------------------------<br>
// | Author: liu21st <liu21st><br>
// | lanfengye <zibin_5257><br>
// +----------------------------------------------------------------------<br>
<br>
class Page {<br>
<br>
// 分页栏每页显示的页数<br>
public $rollPage = 5;<br>
// 页数跳转时要带的参数<br>
public $parameter ;<br>
// 分页URL地址<br>
public $url = '';<br>
// 默认列表每页显示行数<br>
public $listRows = 20;<br>
// 起始行数<br>
public $firstRow ;<br>
// 分页总页面数<br>
protected $totalPages ;<br>
// 总行数<br>
protected $totalRows ;<br>
// 当前页数<br>
protected $nowPage ;<br>
// 分页的栏的总页数<br>
protected $coolPages ;<br>
// 分页显示定制<br>
protected $config = array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'<span>最后一页</span>','theme'=>'<ul>
<li><span> %totalRow% %header% %nowPage%/%totalPage% 页</span></li> %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%</ul>');<br>
// 默认分页变量名<br>
protected $varPage;<br>
<br>
/**<br>
* 架构函数<br>
* @access public<br>
* @param array $totalRows 总的记录数<br>
* @param array $listRows 每页显示记录数<br>
* @param array $parameter 分页跳转的参数<br>
*/<br>
public function __construct($totalRows,$listRows='',$parameter='',$url='') {<br>
$this->totalRows = $totalRows;<br>
$this->parameter = $parameter;<br>
$this->varPage = C('VAR_PAGE') ? C('VAR_PAGE') : 'p' ;<br>
if(!empty($listRows)) {<br>
$this->listRows = intval($listRows);<br>
}<br>
$this->totalPages = ceil($this->totalRows/$this->listRows); //总页数<br>
$this->coolPages = ceil($this->totalPages/$this->rollPage);<br>
$this->nowPage = !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;<br>
if($this->nowPage
$this->nowPage = 1;<br>
}elseif(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {<br>
$this->nowPage = $this->totalPages;<br>
}<br>
$this->firstRow = $this->listRows*($this->nowPage-1);<br>
if(!empty($url)) $this->url = $url; <br>
}<br>
<br>
public function setConfig($name,$value) {<br>
if(isset($this->config[$name])) {<br>
$this->config[$name] = $value;<br>
}<br>
}<br>
<br>
/**<br>
* 分页显示输出<br>
* @access public<br>
*/<br>
public function show() {<br>
<br>
if(0 == $this->totalRows) return '';<br>
$p = $this->varPage;<br>
$nowCoolPage = ceil($this->nowPage/$this->rollPage);<br>
<br>
// 分析分页参数<br>
if($this->url){<br>
$depr = C('URL_PATHINFO_DEPR');<br>
$url = rtrim(U('/'.$this->url,'',false),$depr).$depr.'__PAGE__';<br>
}else{<br>
if($this->parameter && is_string($this->parameter)) {<br>
parse_str($this->parameter,$parameter);<br>
}elseif(is_array($this->parameter)){<br>
$parameter = $this->parameter;<br>
}elseif(empty($this->parameter)){<br>
unset($_GET[C('VAR_URL_PARAMS')]);<br>
$var = !empty($_POST)?$_POST:$_GET;<br>
if(empty($var)) {<br>
$parameter = array();<br>
}else{<br>
$parameter = $var;<br>
}<br>
}<br>
$parameter[$p] = '__PAGE__';<br>
$url = U('',$parameter);<br>
}<br>
//上下翻页字符串<br>
$upRow = $this->nowPage-1;<br>
$downRow = $this->nowPage+1;<br>
if ($upRow>0){<br>
$upPage = "<li><a>".$this->config['prev']."</a></li>";<br>
}else{<br>
$upPage = '';<br>
}<br>
<br>
if ($downRow totalPages){<br>
$downPage = "<li><a>".$this->config['next']."</a></li>";<br>
}else{<br>
$downPage = '';<br>
}<br>
// >><br>
if($nowCoolPage == 1){<br>
$theFirst = '';<br>
$prePage = '';<br>
}else{<br>
$preRow = $this->nowPage-$this->rollPage;<br>
$prePage = "<li><a>上".$this->rollPage."页</a></li>";<br>
$theFirst = "<li><a>".$this->config['first']."</a></li>";<br>
}<br>
if($nowCoolPage == $this->coolPages){<br>
$nextPage = '';<br>
$theEnd = '';<br>
}else{<br>
$nextRow = $this->nowPage+$this->rollPage;<br>
$theEndRow = $this->totalPages;<br>
$nextPage = "<li><a>下".$this->rollPage."页</a></li>";<br>
$theEnd = "<a>".$this->config['last']."</a>";<br>
}<br>
// 1 2 3 4 5<br>
$linkPage = "";<br>
for($i=1;$irollPage;$i++){<br>
$page = ($nowCoolPage-1)*$this->rollPage+$i;<br>
if($page!=$this->nowPage){<br>
if($pagetotalPages){<br>
$linkPage .= "<li><a>".$page."</a></li>";<br>
}else{<br>
break;<br>
}<br>
}else{<br>
if($this->totalPages != 1){<br>
$linkPage .= "<li><span>".$page."</span></li>";<br>
}<br>
}<br>
}<br>
$pageStr = str_replace(<br>
array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),<br>
array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);<br>
return $pageStr;<br>
}<br>
<br>
}</zibin_5257></liu21st>------------------------------------------------------------------------------
模板中使用：<div>{$page}</div> //基本样式<br>
<div>{$page}</div>//大号数字样式
AD：真正免费，域名+虚机+企业邮箱=0元