问题描述：

效果展示：

解决思想：

一、首先你想要先判断当前数据库表中的页数和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

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

效果展示：

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

第一页：

第二页：

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

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

点击1的时候显示123

点击2的时候显示123

点击3的时候显示234

点击4的时候显示345

点击5的时候显示456

点击6的时候显示567

点击7的时候显示678

点击8的时候显示678

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

第一页：

解决思想：

前提是有我从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属性，让图标亮

流程图：

只包含页数的代码：

<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对象@Resourceprivate 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>

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