html分页过多，实现分页处理，固定分页数目，数目始终中间显示，自定义分页跳转(在结尾的代码)

ゝ一世哀愁。 2023-07-18 14:18 7阅读 0赞

**目录**

问题描述：

效果展示：

解决思想：

一、首先你想要先判断当前数据库表中的页数和3是什么关系

二、其次讨论一下特殊的首页和尾页，也就是第1页和第8页

三、如何对userPageInfo.pageNum-1和userPageInfo.pageNum+1进行判断

四、如何对输入的页数在begin和end之间进行判断

流程图：

只包含页数的代码：

Controller部分封装userPageInfo的代码:

整个分页条的代码：

--------------------

# 问题描述： #

昨晚想实现这个功能，上网搜了很多都是有关js的，由于本人没怎么学过js，因为好多方法都放弃了

后来在一篇csdn上发现了html的写法

传送门：[https://blog.csdn.net/qq\_41215763/article/details/78980647?depth\_1-utm\_source=distribute.pc\_relevant.none-task&utm\_source=distribute.pc\_relevant.none-task][https_blog.csdn.net_qq_41215763_article_details_78980647_depth_1-utm_source_distribute.pc_relevant.none-task_utm_source_distribute.pc_relevant.none-task]

我在套用了我的情况之后，对这个代码稍作了一些润色和说明，在这里分享一下我的经验和解决的过程

# 效果展示： #

一、当我的页数只有3页以内的时候

第一页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70][]

第二页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 1][]

二、当我的页数超过3页以内的时候

我要显示的目标效果是：（数据库的表有8页）

点击1的时候显示123

点击2的时候显示123

点击3的时候显示234

点击4的时候显示345

点击5的时候显示456

点击6的时候显示567

点击7的时候显示678

点击8的时候显示678

为了方便，我只在首页和尾页全截，其余都只截图页码部分的变化

第一页：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 2][]

![20200329100018322.jpg][]

![20200329100101479.jpg][]

![20200329100121432.jpg][]

![2020032910015510.jpg][]

![20200329100216882.jpg][]

![202003291002317.jpg][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 3][]

# 解决思想： #

前提是有我从controller传过来的userPageInfo对象，这部分是controller部分，由于现在讲的是html部分的写法，所以关于controller部分的代码我在结尾贴出

由于我要实现的是每页只显示三页，你们需要根据自己每页需要展示的页数，在我的代码上进行修改

我现在就拿每页显示三页举例子

### 一、首先你想要先判断当前数据库表中的页数和3是什么关系 ###

如果<=3，那么说明，你有几页就显示几页

比如你有1页，那就显示1页

比如你有2页，那就显示1 2页

比如你有3页，那就显示1 2 3页

如果>3，那么说明，你需要进行对你输入的页数做一些判断来处理这个页数

如果你输入的页数是1，那就显示1 2 3（特殊，后面说）

如果你输入的页数是2，那就显示1 2 3

如果你输入的页数是3，那就显示2 3 4

如果你输入的页数是4，那就显示3 4 5

如果你输入的页数是5，那就显示4 5 6

如果你输入的页数是6，那就显示5 6 7

如果你输入的页数是7，那就显示6 7 8

如果你输入的页数是n，那就显示userPageInfo.pageNum-1—userPageInfo.pageNum—userPageInfo.pageNum+1

如果你输入的页数是8，那就显示6 7 8（特殊，后面说）

### 二、其次讨论一下特殊的首页和尾页，也就是第1页和第8页 ###

首先解释一下为什么这两页特殊

这是由于我们在进行上述判断时，

有userPageInfo.pageNum-1—userPageInfo.pageNum—userPageInfo.pageNum+1这个式子产生

其中的userPageInfo.pageNum-1和userPageInfo.pageNum+1是有可能超过我们的页数范围的

--------------------

**举个栗子：**

比如我现在数据库的表有8页，也就是我能达到的地方只有1-8，除此之外，都去不了

**但是**

当userPageInfo.pageNum=1时，userPageInfo.pageNum-1=0

当userPageInfo.pageNum=8时，userPageInfo.pageNum+1=9

--------------------

所以要对userPageInfo.pageNum-1和userPageInfo.pageNum+1进行判断

### 三、如何对userPageInfo.pageNum-1和userPageInfo.pageNum+1进行判断 ###

首先我们先用变量存储一下他们两个，方便我们后面判断

假设用begin=userPageInfo.pageNum-1，用end=userPageInfo.pageNum+1存储

--------------------

**举个栗子：**

如果begin==0，那就只显示1 2 3页

因为我要显示3页，所以这是固定的（如果你要显示4页，那就是显示1 2 3 4）

此时begin=1，end=3

（如果你要显示4页，那么begin=1，end=4）

如果end==0，那就只显示6 7 8页

这是需要根据我们数据库的页数来决定的，所以不是固定的（如果你要显示4页，那就是显示5 6 7 8）

此时begin=userPageInfo.pages-2，end=userPageInfo.pages

（如果你要显示4页，那么begin=userPageInfo.pages-3，end=userPageInfo.pages）

--------------------

这样一来我们只要在页数里，对输入的页数进行判断，判断的范围就在begin和end之间

### 四、如何对输入的页数在begin和end之间进行判断 ###

我们要对显示在屏幕上的页数进行遍历判断

如果页数就是此时访问的页数，那就把属性设置为<li class="active"> 这样就可以点亮页数图标了

--------------------

**举个栗子：**

比如说当前显示的页数是3 4 5，我想访问4

遍历到3 5的时候，不是我要访问的，图标就不亮

遍历到4的时候，就是我要访问的，此时就给他设置一个active属性，让图标亮

--------------------

# 流程图： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 4][]

# 只包含页数的代码： #

<c:if test="${userPageInfo.pages<=3}">
        <c:set var="begin" value="1" />
        <c:set var="end" value="${userPageInfo.pages}" />
    </c:if>
    <c:if test="${userPageInfo.pages>3}">
        <c:choose>
            <c:when test="${userPageInfo.pageNum < 3}">
                <c:set var="begin" value="1" />
                <c:set var="end" value="3" />
            </c:when>
            <%--页数超过了3页--%>
            <c:otherwise>
                <c:set var="begin" value="${userPageInfo.pageNum - 1}" />
                <c:set var="end" value="${userPageInfo.pageNum + 1}" />
                <%--如果begin减1后为0,设置起始页为1,最大页为3--%>
                <c:if test="${begin == 0}">
                    <c:set var="begin" value="1" />
                    <c:set var="end" value="3" />
                </c:if>
                <%--如果end超过最大页,设置起始页=最大页-2--%>
                <c:if test="${end > userPageInfo.pages}">
                    <c:set var="begin" value="${userPageInfo.pages - 2}" />
                    <c:set var="end" value="${userPageInfo.pages}" />
                </c:if>
            </c:otherwise>
        </c:choose>
    </c:if>
    <%--遍历--%>
    <c:forEach var="i" begin="${begin}" end="${end}">
        <%--当前页,选中--%>
        <c:choose>
            <c:when test="${i == userPageInfo.pageNum}">
                <li class="page-item active">
                    <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${i}">${i}</a>
                </li>
            </c:when>
            <%--不是当前页--%>
            <c:otherwise>
                <li class="page-item">
                    <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${i}">${i}</a>
                </li>
            </c:otherwise>
        </c:choose>
    </c:forEach>

# Controller部分封装userPageInfo的代码: #

@Controller
    @RequestMapping("/user")
    public class UserController {
    
        //注入service对象
        @Resource
        private UserService userService;
    
        /**
         * 分页查询
         * @param pageNum 把当前页数传到后台，并给他一个默认值
         *                把查到的数据和分页类传到前台页面
         * @return
         */
        @RequestMapping("/listByPage")
        public String listByPage(@RequestParam(name="pageNum",defaultValue = "1") Integer pageNum,Model model){
            //设置分页参数
            PageHelper.startPage(pageNum,5);
            //查询所有数据
            List<User> userList = userService.findAll();
            /**
             * pageNum:当前页
             * pageSize：每页的数量
             * size：当前页的数量
             * pages：总页数
             * total：总记录数
             */
            //使用PageInfo封装查询结果，把数据放在分页类中
            PageInfo<User> userPageInfo = new PageInfo<>(userList);
            //传分页类
            model.addAttribute("userPageInfo",userPageInfo);
    
            return "test";
        }
    }

# 整个分页条的代码： #

<div>
        <nav aria-label="Page navigation example" >
            <ul class="pagination justify-content-center" style="align-items: center">
                <li class="page-item">
                    <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${1}">首页</a>
                </li>
                <li class="page-item">
                    <c:if test="${userPageInfo.hasPreviousPage }">
                        <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${userPageInfo.pageNum-1}">上一页</a>
                    </c:if>
                    <c:if test="${userPageInfo.isFirstPage==true}">
                        <a class="page-link disabled" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </c:if>
                </li>
    
                <c:if test="${userPageInfo.pages<=3}">
                    <c:set var="begin" value="1" />
                    <c:set var="end" value="${userPageInfo.pages}" />
                </c:if>
                <c:if test="${userPageInfo.pages>3}">
                    <c:choose>
                        <c:when test="${userPageInfo.pageNum < 3}">
                            <c:set var="begin" value="1" />
                            <c:set var="end" value="3" />
                        </c:when>
                        <%--页数超过了3页--%>
                        <c:otherwise>
                            <c:set var="begin" value="${userPageInfo.pageNum - 1}" />
                            <c:set var="end" value="${userPageInfo.pageNum + 1}" />
                            <%--如果begin减1后为0,设置起始页为1,最大页为3--%>
                            <c:if test="${begin == 0}">
                                <c:set var="begin" value="1" />
                                <c:set var="end" value="3" />
                            </c:if>
                            <%--如果end超过最大页,设置起始页=最大页-2--%>
                            <c:if test="${end > userPageInfo.pages}">
                                <c:set var="begin" value="${userPageInfo.pages - 2}" />
                                <c:set var="end" value="${userPageInfo.pages}" />
                            </c:if>
                        </c:otherwise>
                    </c:choose>
                </c:if>
                <%--遍历--%>
                <c:forEach var="i" begin="${begin}" end="${end}">
                    <%--当前页,选中--%>
                    <c:choose>
                        <c:when test="${i == userPageInfo.pageNum}">
                            <li class="page-item active">
                                <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${i}">${i}</a>
                            </li>
                        </c:when>
                        <%--不是当前页--%>
                        <c:otherwise>
                            <li class="page-item">
                                <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${i}">${i}</a>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
    
                <li class="page-item">
                    <c:if test="${userPageInfo.hasNextPage }">
                        <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${userPageInfo.pageNum+1}">下一页</a>
                    </c:if>
                    <c:if test="${userPageInfo.isLastPage==true}">
                        <a class="page-link disabled" href="#">下一页</a>
                    </c:if>
                </li>
                <li class="page-item">
                    <a class="page-link" href="${pageContext.request.contextPath}/user/listByPage?pageNum=${userPageInfo.pages}">尾页</a>
                </li>
                <li class="page-item">
                    <span class="page-item">
                        <a>共${userPageInfo.total}条记录，总共${userPageInfo.pages}页，到第</a>
                    </span>
                </li>
                <li class="page-item">
                    <div class="input-group-sm">
                        <input type="text" id="inputPage" class="page-link" style="width: 35px;height: 35px">
                    </div>
                </li>
                <li class="page-item">
                    <a>页</a>
                </li>
                <li class="page-item">
                    <a class="page-link disabled" href="${pageContext.request.contextPath}/user/listByPage?pageNum="
                       onclick="this.href+=document.getElementById('inputPage').value>${userPageInfo.pages}?${userPageInfo.pages}:document.getElementById('inputPage').value">跳转</a>
                </li>
            </ul>
        </nav>
    </div>

由于本人初学，有哪里说的不对的地方，欢迎大佬们指出

[https_blog.csdn.net_qq_41215763_article_details_78980647_depth_1-utm_source_distribute.pc_relevant.none-task_utm_source_distribute.pc_relevant.none-task]: https://blog.csdn.net/qq_41215763/article/details/78980647?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70]: /images/20230528/3556b8005a58430e9804c60baef20321.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 1]: /images/20230528/3bd191397acf46a8b5917c219f49c692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 2]: /images/20230528/3fbdb0d332fe411f82a90da013975e08.png
[20200329100018322.jpg]: /images/20230528/4557d28468fa40189c7834bdc2ae420b.png
[20200329100101479.jpg]: /images/20230528/b48168e2c2df4ce284a65efac42d2ed5.png
[20200329100121432.jpg]: /images/20230528/a710e7d95ce940a7bf2e696caad23bed.png
[2020032910015510.jpg]: /images/20230528/ab6e4347038f42918bd4691a05008a76.png
[20200329100216882.jpg]: /images/20230528/f3a4661372a541dc9ea0b92d71e503c1.png
[202003291002317.jpg]: /images/20230528/d23e58dc1bf8482fba8d2a4d6e8c1180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 3]: /images/20230528/c70d8d31ef2240b2bbc59c38454e6908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5oYWliYl8_size_16_color_FFFFFF_t_70 4]: /images/20230528/f9a6fe973c1b4d44b2a9c9d1a183dc74.png