前台调用代码
<div class="pagi">{$=pagi('{$-pagi-pagenum}',  '{$-pagi-pagetotal}', $createURL('list', '{$-category}', array('page'  => '[~page]')), 'pagi-2')}</div>
 
CSS样式增加
.pagi {
  line-height: 100%; text-align: center
}
.pagi a {
   display: inline-block; background: #fff; padding: 10px; font-size:  1.4rem; color: #666; border: #eee 1px solid; border-right: 0px; cursor:  pointer; vertical-align: middle
}
.pagi a:last-child {
  border-right: #eee 1px solid
}
.pagi a.on {
  text-decoration: underline
}
 
修改或增加page节点
/common/template/config.jtbc文件，默认的pagi-2节点代码如下：
<a class="link"  href="{$-firstpagelink}">&laquo;</a>{@}<a class="link  {$-class}" href="{$-link}">{$-num}</a>{@}<a class="link"  href="{$-lastpagelink}">&raquo;</a>
 
注明：

<a class="link" href="{$-firstpagelink}">&laquo;</a>是上一页的链接，
<a class="link {$-class}" href="{$-link}">{$-num}</a>是页码的链接
<a class="link" href="{$-lastpagelink}">&raquo;</a>是下一页的链接。理解了就可以随意修改。

 

 

另附原分页代码和一个我修改的分页代码对比下周末修改的

 

原分页模板代码如下

<span>{$-page1}/{$-page2}</span><a class="link first" link="{$-firstpagelink}">&laquo;</a>{@}<a class="link {$-class}" link="{$-link}">{$-num}</a>{@}<a class="link last" link="{$-lastpagelink}">&raquo;</a><input type="text" id="{$-pagiid}-input" class="pagenum" value="{$-next-page-num}" /><a mode="pagigo" baselink="{$-baselink}" class="go">GO</a>

 

 

我修改的一个分页代码如下。
<ul class="pagination"><li><a href="{$-firstpagelink}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>{@}<li class="active"><a href="{$-link}">{$-num}</a></li>{@}<li><a href="{$-lastpagelink}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul>

 

大家可以对比下就知道分页代码怎么修改了。

{$-firstpagelink}是上一页的链接代码

{$-link}是页码的链接代码

{$-lastpagelink}是下一页的链接代码

<div class="styled-pagination text-center">
                        <ul class="clearfix"> 
                            <li class="active"><a href="#">1</a></li> 
                            <li><a href="#">2</a></li> 
                            <li><a href="#">3</a></li>
                             <li class="next"><a href="#">Next</a></li> 
                        </ul> 
                    </div>
 

原css样式代码如下。

 

.styled-pagination{
    position:relative;
    display: block;
    width: 100%;
}

.styled-pagination ul{
    position:relative;
    width: 100%;
}

.styled-pagination li{
    position:relative;
    display: inline-block;
    margin: 0 4px 8px;
}

.styled-pagination li a{
    position:relative;
    display: block;
    height:40px;
    width: 40px;
    text-align: center;
    line-height:40px;
    font-weight:400;
    font-size:14px;
    background:#ffffff;
    color:#222222;
    border:1px dashed #d7d7d7;
    -webkit-transition:all 300ms ease;
    -ms-transition:all 300ms ease;
    -o-transition:all 300ms ease;
    -moz-transition:all 300ms ease;
    transition:all 300ms ease;
}

.styled-pagination li a:hover,
.styled-pagination li.active a{
    color:#ffffff;   
    background:#43c3ea;
    border-color:#43c3ea;
}

.styled-pagination li.next a,
.styled-pagination li.prev a{
    min-width: 70px;
    background-color: #152545;
    color: #ffffff;
}

.styled-pagination li.next a:hover,
.styled-pagination li.prev a:hover{
    color:#ffffff;   
    background:#43c3ea;
    border-color:#43c3ea;
}

 

 

page模板

                                <li class="next"><a href="{$-firstpagelink}">上一页</a></li>

                                {@}<li class="{$-class}"><a href="{$-link}">{$-num}</a></li>{@}

                                <li class="next"><a href="{$-lastpagelink}">下一页</a></li>

 

 

参考active增加css 的li.on样式

.styled-pagination li.on a {
  color:#ffffff;   
    background:#43c3ea;
    border-color:#43c3ea;
}
 

前台模板代码

<div class="styled-pagination">
                            <ul class="clearfix">
                                {$=pagi('{$-pagi-pagenum}', '{$-pagi-pagetotal}', $createURL('list', '{$-category}', array('page' => '[~page]')), 'pagi-3')}
                            </ul>
                </div>