目录
三、如何对userPageInfo.pageNum-1和userPageInfo.pageNum+1进行判断
Controller部分封装userPageInfo的代码:
问题描述：
昨晚想实现这个功能，上网搜了很多都是有关js的，由于本人没怎么学过js，因为好多方法都放弃了
后来在一篇csdn上发现了html的写法
我在套用了我的情况之后，对这个代码稍作了一些润色和说明，在这里分享一下我的经验和解决的过程
效果展示：
一、当我的页数只有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对象
@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>由于本人初学，有哪里说的不对的地方，欢迎大佬们指出
8450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
