首页 > 技术文章 > 使用pageHelper结合EL,JSTL进行分页,使分页条达到前5后4的效果

xunmengjun 2020-12-29 18:18 原文

在页面分页进行数据展示的时候,如果页面的总页数太多,使分页条太长,不太美观。

一般我们都会将分页条设计为前五后四的效果,比较简洁美观。

效果如下:

 

只在此展示分页条的代码:

<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>

 

推荐阅读