在页面分页进行数据展示的时候,如果页面的总页数太多,使分页条太长,不太美观。
一般我们都会将分页条设计为前五后四的效果,比较简洁美观。
效果如下:
只在此展示分页条的代码:
<div class="box-tools pull-right">
<ul class="pagination">
<li>
<a href="${pageContext.request.contextPath}/orders/findAll?pageNum=1&pageSize=${pageInfo.pageSize}" aria-label="Previous">首页</a>
</li>
<li>
<a href="${pageContext.request.contextPath}/orders/findAll?pageNum=${pageInfo.pageNum-1}&pageSize=${pageInfo.pageSize}">上一页</a>
</li>
<c:choose>
<%--总页码超过10页--%>
<c:when test="${pageInfo.pages>10}">
<c:choose>
<%--如果前边不够5个,后边补齐10个--%>
<c:when test="${pageInfo.pageNum-5<1}">
<c:set var="begin" value="1"/>
<c:set var="end" value="10"/>
</c:when>
<%--果后边不足4个,前边补齐10个--%>
<c:when test="${pageInfo.pageNum>pageInfo.pages-4}">
<c:set var="begin" value="${pageInfo.pages-9}"/>
<c:set var="end" value="${pageInfo.pages}"/>
</c:when>
<c:otherwise>
<c:set var="begin" value="${pageInfo.pageNum-5}"/>
<c:set var="end" value="${pageInfo.pageNum+4}"/>
</c:otherwise>
</c:choose>
</c:when>
<%--总页码不够10页--%>
<c:otherwise>
<c:set var="begin" value="1"/>
<c:set var="end" value="${pageInfo.pages}"/>
</c:otherwise>
</c:choose>
<c:forEach begin="${begin}" end="${end}" var="pageNum">
<c:if test="${pageNum==pageInfo.pageNum}">
<li class="active">
<a href="${pageContext.request.contextPath}/orders/findAll?pageNum=${pageNum}&pageSize=${pageInfo.pageSize}">${pageNum}</a>
</li>
</c:if>
<c:if test="${pageNum!=pageInfo.pageNum}">
<li>
<a href="${pageContext.request.contextPath}/orders/findAll?pageNum=${pageNum}&pageSize=${pageInfo.pageSize}">${pageNum}</a>
</li>
</c:if>
</c:forEach>
<li>
<a href="${pageContext.request.contextPath}/orders/findAll?pageNum=${pageInfo.pageNum+1}&pageSize=${pageInfo.pageSize}">下一页</a>
</li>
<li>
<a href="${pageContext.request.contextPath}/orders/findAll?pageNum=${pageInfo.pages}&pageSize=${pageInfo.pageSize}" aria-label="Next">尾页</a>
</li>
</ul>
</div>