页脚模块的一个小需求（页面显示5个页码，并且当前页码着重显示）

最新推荐文章于 2023-06-18 13:18:21 发布

原创

最新推荐文章于 2023-06-18 13:18:21 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web

博客探讨了在网页分页功能中，如何设计一个显示5个页码的页脚模块，并确保当前页码突出显示。针对页码总数小于等于5和大于5的情况，分别提供了实现逻辑。当页码总数大于5时，确保当前页码位于中央或特殊情况下（如最前或最后两个页码）的布局调整。文章指出，代码中可能存在需要优化的地方，例如避免空指针异常，并提出将通用部分抽取出来以提高效率。

在学习分页的时候，有一个小需求：
***页码模块，显示5个页码，当前页码着重显示

效果图：
在这里插入图片描述

思路：既然要显示5个页码，那么就要考虑页码总数（pageTotal）小于等于5和大于5 两种情况

情况一：pageTotal<=5

. 直接遍历，对所有的页码做判断，是当前页（pageNo），就着重显示

情况二：pageTotal>5

此时，页码肯定都>5,理想情况当前页码，应该在中间：效果图如下：

但是当当前页码是最前面2个，或者最后2个的时候，在保证显示5个页码的情况下，效果图如下：

当前页码不是在最中间，所以分三种情况：具体代码如下：

 <c:choose>
            <%--            当总页面<=5页的时候--%>
            <c:when test="${requestScope.page.pageTotal<= 5}">
                <c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i">
                    <c:if test="${requestScope.page.pageNo == i}">
                        <a>[${
   
   i}]</a>
                    </c:if>
                    <c:if test="${requestScope.page.pageNo != i}">
                        <a href="manager/bookServlet?action=page&pageNo=${i}">${
   
   i}</a>
                    </c:if>
                </c:forEach>
            </c:when>
            <%--        当总页面>5页的时候--%>
            <c:when test="${requestScope.page.pageTotal > 5}">
                <c:choose>
                    <%--                当pageNo<

最低0.47元/天解锁文章