您好,欢迎访问一九零五行业门户网

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

相信许多前端高手均能写出漂亮的分页样式,但haran觉得适当“拿来”一次也无妨。
先看效果。
分页类修改内容:只涉及到样子生成部分代码,在原来每个a链接前加了li,在返回的样式字符串前加ul,以适合boostrap的css文件的定义。
bootstrap的css文件基本保持原状,只是加了一个#lastspan的样式定义。
--------------------------------------------------------------------------------
pagination.css.pagination {
  margin: 20px 0;
}
.pagination ul {
  display: inline-block;
  list-style:none;
  *display: inline;
  /* ie7 inline-block hack */
*zoom: 1;
  margin-left: 0;
  margin-bottom: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination ul > li {
  display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span,
.pagination #lastspan {
  float: left;
  padding: 4px 12px;
  line-height: 20px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
  color: #999999;
  cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
  color: #999999;
  background-color: transparent;
  cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-left-width: 1px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-left-radius: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span,
.pagination #lastspan {
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-right-radius: 4px;
}
.pagination-centered {
  text-align: center;
}
.pagination-right {
  text-align: right;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span,
.pagination-large #lastspan{
  padding: 11px 19px;
  font-size: 17.5px;
}
.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-left-radius: 6px;
}
.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span,
.pagination-large #lastspan {
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  border-bottom-right-radius: 6px;
}
.pagination-mini ul > li:first-child > a,
.pagination-small ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > span {
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-left-radius: 3px;
}
.pagination-mini ul > li:last-child > a,
.pagination-small ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > span {
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  border-bottom-right-radius: 3px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
  padding: 2px 10px;
  font-size: 11.9px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
  padding: 0 6px;
  font-size: 10.5px;
}-------------------------------------------------------------------------------
page.class.php'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalrow% %header% %nowpage%/%totalpage% 页 %uppage% %downpage% %first%  %prepage%  %linkpage%  %nextpage% %end%');
    // 默认分页变量名
    protected $varpage;
/**
     * 架构函数
     * @access public
     * @param array $totalrows  总的记录数
     * @param array $listrows  每页显示记录数
     * @param array $parameter  分页跳转的参数
     */
    public function __construct($totalrows,$listrows='',$parameter='',$url='') {
        $this->totalrows    =   $totalrows;
        $this->parameter    =   $parameter;
        $this->varpage      =   c('var_page') ? c('var_page') : 'p' ;
        if(!empty($listrows)) {
            $this->listrows =   intval($listrows);
        }
        $this->totalpages   =   ceil($this->totalrows/$this->listrows);     //总页数
        $this->coolpages    =   ceil($this->totalpages/$this->rollpage);
        $this->nowpage      =   !empty($_get[$this->varpage])?intval($_get[$this->varpage]):1;
        if($this->nowpage            $this->nowpage  =   1;
        }elseif(!empty($this->totalpages) && $this->nowpage>$this->totalpages) {
            $this->nowpage  =   $this->totalpages;
        }
        $this->firstrow     =   $this->listrows*($this->nowpage-1);
        if(!empty($url))    $this->url  =   $url; 
    }
public function setconfig($name,$value) {
        if(isset($this->config[$name])) {
            $this->config[$name]    =   $value;
        }
    }
/**
     * 分页显示输出
     * @access public
     */
    public function show() {
if(0 == $this->totalrows) return '';
        $p              =   $this->varpage;
        $nowcoolpage    =   ceil($this->nowpage/$this->rollpage);
// 分析分页参数
        if($this->url){
            $depr       =   c('url_pathinfo_depr');
            $url        =   rtrim(u('/'.$this->url,'',false),$depr).$depr.'__page__';
        }else{
            if($this->parameter && is_string($this->parameter)) {
                parse_str($this->parameter,$parameter);
            }elseif(is_array($this->parameter)){
                $parameter      =   $this->parameter;
            }elseif(empty($this->parameter)){
                unset($_get[c('var_url_params')]);
                $var =  !empty($_post)?$_post:$_get;
                if(empty($var)) {
                    $parameter  =   array();
                }else{
                    $parameter  =   $var;
                }
            }
            $parameter[$p]  =   '__page__';
            $url            =   u('',$parameter);
        }
        //上下翻页字符串
        $uprow          =   $this->nowpage-1;
        $downrow        =   $this->nowpage+1;
        if ($uprow>0){
            $uppage     =    .$this->config['prev'].;
        }else{
            $uppage     =    '';
        }
if ($downrow totalpages){
            $downpage   =   .$this->config['next'].;
        }else{
            $downpage   =   '';
        }
        //  >>
        if($nowcoolpage == 1){
            $thefirst   =   '';
            $prepage    =   '';
        }else{
            $prerow     =   $this->nowpage-$this->rollpage;
            $prepage    =   上.$this->rollpage.页;
            $thefirst   =   .$this->config['first'].;
        }
        if($nowcoolpage == $this->coolpages){
            $nextpage   =   '';
            $theend     =   '';
        }else{
            $nextrow    =   $this->nowpage+$this->rollpage;
            $theendrow  =   $this->totalpages;
            $nextpage   =   下.$this->rollpage.页;
            $theend     =   .$this->config['last'].;
        }
        // 1 2 3 4 5
        $linkpage = ;
        for($i=1;$irollpage;$i++){
            $page       =   ($nowcoolpage-1)*$this->rollpage+$i;
            if($page!=$this->nowpage){
                if($pagetotalpages){
                    $linkpage .= .$page.;
                }else{
                    break;
                }
            }else{
                if($this->totalpages != 1){
                    $linkpage .= .$page.;
                }
            }
        }
        $pagestr     =   str_replace(
            array('%header%','%nowpage%','%totalrow%','%totalpage%','%uppage%','%downpage%','%first%','%prepage%','%linkpage%','%nextpage%','%end%'),
            array($this->config['header'],$this->nowpage,$this->totalrows,$this->totalpages,$uppage,$downpage,$thefirst,$prepage,$linkpage,$nextpage,$theend),$this->config['theme']);
        return $pagestr;
    }
}------------------------------------------------------------------------------
模板中使用:{$page}
 //基本样式
{$page}
//大号数字样式
ad:真正免费,域名+虚机+企业邮箱=0元
其它类似信息

推荐信息