Here a solution, based on these posts (cmsms forum and serendipity forum).
Example: Smarty code
Code: Select all
<!-- Pagination -->
{if $pagecount>1}
{if $pagenum < $pagecount}
{capture assign=pageurl}
{$nextpage_url}
{/capture}
{else}
{capture assign=pageurl}
{$prevpage_url}
{/capture}
{/if}
<div class="paging">
{* begin PAGE NUMBERS *}
<ul class="left">
<li>
<h5 class="bold">Page</h5>
</li>
{eval var=($pagenum-3) assign="paginationStartPage"}
{if $pagenum+3 > $pagecount}
{eval var=($pagecount-6) assign="paginationStartPage"}
{/if}
{if $paginationStartPage <= 0}
{assign var="paginationStartPage" value="1"}
{/if}
{if $paginationStartPage > 1}
<li><a href="{$pageurl|regex_replace:'/pagenum=(\d+)/':'pagenum=1'}" class="backcolrhover">1</a></li>
{/if}
{if $paginationStartPage > 2}
<li>…</li>
{/if}
{section name=i start=$paginationStartPage loop=$pagecount+1 max=7}
{if $smarty.section.i.index != $pagenum}
{capture assign=pagestr}
pagenum={$smarty.section.i.index}
{/capture}
<li>
<a href="{$pageurl|regex_replace:'/pagenum=(\d+)/':$pagestr}" class="backcolrhover">{$smarty.section.i.index}</a>
</li>
{else}
{* CURRENT PAGE*}
<li><span class="backcolr">{$smarty.section.i.index}</span></li>
{/if}
{/section}
{if $smarty.section.i.index < $pagecount}
<li>…</li>
{/if}
{if $smarty.section.i.index <= $pagecount}
{capture assign=pagestr}
pagenum={$pagecount}
{/capture}
<li><a href="{$pageurl|regex_replace:'/pagenum=(\d+)/':$pagestr}" class="backcolrhover">{$pagecount}</a></li>
{/if}
</ul>
{* end PAGE NUMBERS *}
{* begin PREVIOUS - NEXT buttons *}
<ul class="right">
{if $pagenum > 1}
<li>
<a href="{$prevpage_url}" class="prevbtn backcolrhover">Previous</a>
</li>
{/if}
{if $pagenum < $pagecount}
<li>
<a href="{$nextpage_url}" class="nextbtn backcolrhover">Next</a>
</li>
{/if}
</ul>
{* end PREVIOUS - NEXT buttons *}
</div>
{/if}
<!-- END Pagination -->
Code: Select all
.paging {
float: left;
padding: 0 0 10px;
width: 100%;
}
.paging ul {
list-style: none outside none;
padding-right: 15px;
}
.paging ul li {
float: left;
padding-left: 5px;
}
.paging ul li h5 {
padding: 3px 10px 0;
}
.paging a {
border-radius: 3px;
color: #979797;
display: block;
font-size: 12px;
font-weight: bold;
height: 20px;
padding: 4px 10px 0;
}
.paging a:hover {
color: #FFFFFF;
}
.paging a.backcolr {
color: #FFFFFF;
}
.paging a.prevbtn, .paging a.nextbtn {
background-color: #C4C4C4;
color: #FFFFFF;
}
.left {
float: left !important;
}
.backcolr {
background-color: #00417E !important;
}
.backcolrhover:hover {background-color:#00417e !important;}