<#-- page 页码 totalPages 总页数 -->
<#macro pageTag page totalPages url>
<style>
.china-pages{
width: 100%;
height: 36px;
text-align: center;
margin: 30px auto;
font-size: 14px;
color: #999;
}
.china-pages a{
height: 34px;
border: 1px solid #e4e4e4;
line-height: 34px;
text-align: center;
display: inline-block;
padding: 0 13px;
font-size: 14px;
color: #999;
margin: 0 3px;
}
.china-pages a:hover{
color: #c00;
border-color: #c00;
}
.china-pages a.cur{
background: #c00;
color: #fff;
border-color: #c00;
}
.china-pages span{ margin: 0 3px;}
.china-pages input{
width: 48px;
height: 34px;
padding: 0 4px;
line-height: 34px;
border: 1px solid #e4e4e4;
text-align: center;
background: #fff;
color: #666;
}
.china-pages input[type='button']:hover{
background: #c00;
color: #fff;
border-color: #c00;
}
</style>
<div class="china-pages">
<#if (page <= 1) >
<a>上一页</a>
<#else>
<a class="page-prev" href="${url?replace('{0}',page-1)}">上一页</a>
</#if>
<#if (totalPages <= 9 )>
<#assign start=1/>
<#assign end = totalPages/>
<#list start..end as pageIndex>
<#if (pageIndex == page)>
<a class="cur">${pageIndex}</a>
<#else>
<a href="${url?replace('{0}',pageIndex)}">${pageIndex}</a>
</#if>
</#list>
<#else>
<#if (page <= 8)>
<#assign start = 1/>
<#assign end = 9/>
<#else>
<#if (page == totalPages)>
<#assign start = page-7/>
<#else>
<#if (page+1==totalPages)>
<#assign start = page-8/>
<#else>
<#assign start = page-7/>
</#if>
</#if>
<#if (page+1<totalPages)>
<#assign end = page+1/>
<#elseif (page>=totalPages||page+1>=totalPages)>
<#assign end = totalPages/>
</#if>
</#if>
<#list start..end as pageIndex>
<#if (pageIndex == page)>
<a class="cur">${pageIndex}</a>
<#else>
<a href="${url?replace('{0}',pageIndex)}">${pageIndex}</a>
</#if>
</#list>
<#if (page+1 <= totalPages && totalPages > 9)>
<span>...</span>
</#if>
</#if>
<#if (totalPages <= page) >
<a>下一页</a>
<#else>
<a class="page-next" href="${url?replace('{0}',page+1)}">下一页</a>
</#if>
<span>共${totalPages}页</span>
<input type="hidden" id="totalPages" value="${totalPages}"/>
<input type="hidden" id="pageUrl" value="${url}"/>
<#if (totalPages > 4) >
<span>转到</span>
<input type="text" id="inputPageIndex">
<span>页</span>
<input id="pageButton" type="button" value="确认">
</#if>
</div>
<script>
//分页功能
var pageTag = {
init: function () {
$("#pageButton").click(function () {
var pageIndex = $("#inputPageIndex").val();
var pageUrl = $("#pageUrl").val();
var totalPage = $("#totalPages").val();
if(isNaN(pageIndex)){
alert("页码不正确");
return;
}
if(parseInt(totalPage)<parseInt(pageIndex)){
alert("页码超出范围");
return;
}
var url = pageUrl.replace("{0}",pageIndex);
pageTag.jump(url);
});
},
jump: function (url) {
window.location = url;
}
};
$(function () {
//分页标签初始化
pageTag.init();
});
</script>
</#macro>
使用方式 url = /xxx.html?pageIndex={0}
<@page.pageTag page=searchResult.pageIndex totalPages=searchResult.totalPages url= url />

来源:oschina
链接:https://my.oschina.net/lbqdgcb/blog/4301372