第一种:之前在项目中用到的比较笨重的方式,纯代码的形式实现,用到<c:if>
判断,有需要的朋友可作参考,自定义样式就可以实现想要的分页效果。
page.pageNo = 当前页数
page.totalPage = 页面总数
<div class="page">
<c:if test="${page.pageNo > 1 }">
<a
href="list?pageNo=${page.pageNo-1 } ">上一页</a>
</c:if>
<c:if test="${page.pageNo != 1 }">
<a href="list?pageNo=1 ">1</a>
</c:if>
<c:if test="${(page.pageNo-3) > 1 }">
<span>…</span>
</c:if>
<c:if test="${(page.pageNo-2) > 1 }">
<a
href="list?pageNo=${page.pageNo-2} ">${page.pageNo-2}</a>
</c:if>
<c:if test="${(page.pageNo-1) > 1 }">
<a
href="list?pageNo=${page.pageNo-1} ">${page.pageNo-1}</a>
</c:if>
<c:if test="${page.pageNo != null}">
<a style="background-color: white; color: black;"
href="list?pageNo=${page.pageNo} ">${page.pageNo}</a>
</c:if>
<c:if test="${page.totalPage > (page.pageNo+1)}">
<a
href="list?pageNo=${page.pageNo+1} ">${page.pageNo+1}</a>
</c:if>
<c:if test="${page.totalPage > (page.pageNo+2)}">
<a
href="list?pageNo=${page.totalPage+2} ">${page.pageNo+2}</a>
</c:if>
<c:if test="${page.totalPage > (page.pageNo+3)}">
<span>…</span>
</c:if>
<c:if test="${page.pageNo != page.totalPage }">
<a
href="list?pageNo=${page.totalPage} ">${page.totalPage}</a>
</c:if>
<c:if test="${page.pageNo < page.totalPage }">
<a
href="list?pageNo=${page.pageNo+1} ">下一页</a>
</c:if>
</div>
实现效果(没有写任何样式,仅显示逻辑。可根据自己情况添加样式,不至于这么丑。):
第二种:使用js分页插件,直接使用,不必再自己写分页逻辑。
url:”请求地址 ?pageNo=”
<script type="text/javascript" src="/resources/p2p/laypage/laypage.js"></script>
<script type="text/javascript">
function initPage(url){
var totalPages = '${page.totalPages}';
var next = "下一页";
if(totalPages==0||totalPages==null){
next = false;
}
//好像很实用的样子,后端的同学再也不用写分页逻辑了。
laypage({
cont: 'page11',
next:next,
pages: totalPages, //可以叫服务端把总页数放在某一个隐藏域,再获取。假设我们获取到的是18
curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取
var page = location.search.match(/pageNo=(\d+)/);
return page ? page[1] : 1;
}(),
jump: function(e, first){ //触发分页后的回调
if(!first){ //一定要加此判断,否则初始时会无限刷新//
location.href = url+e.curr;
}
}
});
}
</script>
实例效果图: