目录
一.环境配置
1.分页插件依赖
2.在Mybatis里面配置的内容
二.使用分页插件
1.在ServiceImpl层开启分页插件(即查询数据库前开启)
2.控制器方法
3.jsp页面进行整理
4.效果
5. 样式
6.常用的数据说明
一.环境配置
1.分页插件依赖
<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.2</version></dependency>
2.在Mybatis里面配置的内容
<!-- 配置分页插件 PageInterceptor--><plugins><plugin interceptor="com.github.pagehelper.PageInterceptor"/></plugins>
二.使用分页插件
1.在ServiceImpl层开启分页插件(即查询数据库前开启)
public PageInfo<User> findAllUser(int pagNum) {
// 查询之前开启 开启分页功能PageHelper.startPage(pagNum,3);
// 查询所有用户信息List<User> allUser = userMapper.findAllUser();
// 获取分页相关数据PageInfo<User> page = new PageInfo<>(allUser,3);return page;}
2.控制器方法
注:pageNum设置为包装类很实用
@RequestMapping("/findAllUser")public String findAllUser(Model model,Integer pageNum){
// 不能直接获取员工信息,因为要获取页码数等传递到webif (pageNum == null) {pageNum=1;}PageInfo<User> page= userService.findAllUser(pageNum);System.out.println("find"+pageNum);model.addAttribute("page",page);return "user_list";}
3.jsp页面进行整理
<c:forEach var="user" items="${page.list }"><tr><td class="row">${user.id}</td><td class="row">${user.name}</td><td class="row">${user.pwd}</td><td class="row">${user.age}</td><td class="row">${user.sex}</td><td class="row"><button id="del" class="btn btn-primary" onclick="delUser(${user.id})">删除</button><button class="btn btn-primary" data-toggle="modal" data-target="#myModal2" onclick="findUserById(${user.id})">修改</button></td>
<%--模态框data-target="#myModal2" id="myModal2" 对应这个--%></tr></c:forEach><c:if test="${page.hasNextPage}"><a href="/findAllUser?pageNum=${page.pageNum+1}">下一页</a><a href="/findAllUser?pageNum=${page.lastPage}">末页</a>
</c:if><span><c:forEach items="${page.navigatepageNums}" var="p"><c:if test="${page.pageNum== p}" ><a class="color1" href="/findAllUser?pageNum=${p}" >${p}</a></c:if><c:if test="${page.pageNum!=p}"><a href="/findAllUser?pageNum=${p}">${p}</a></c:if></c:forEach></span>
<c:if test="${page.hasPreviousPage}"><a href="/findAllUser?pageNum=${page.pageNum-1}">上一页</a><a href="/findAllUser?pageNum=1">首页</a>
</c:if>
4.效果

5. 样式
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">body {text-align:center;font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;background: #E6EAE9;}a {color: #c75f3e;}#mytable {width: 700px;padding: 0;margin: 0;}caption {padding: 0 0 5px 0;width: 700px;font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;text-align: right;}th {font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #CAE8EA no-repeat;}th.nobg {border-top: 0;border-left: 0;border-right: 1px solid #C1DAD7;background: none;}td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;background: #fff;font-size:11px;padding: 6px 6px 6px 12px;color: #4f6b72;}td.alt {background: #F5FAFA;color: #797268;}th.spec {border-left: 1px solid #C1DAD7;border-top: 0;background: #fff no-repeat;font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}th.specalt {border-left: 1px solid #C1DAD7;border-top: 0;background: #f5fafa no-repeat;font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #797268;}/*---------for IE 5.x bug*/html>body td{ font-size:11px;}body,td,th {font-family: 宋体, Arial;font-size: 12px;}.color1{color: blue;}
</style>
6.常用的数据说明
pageNum:当前页的页码
pageSize:每页显示的条数
size:当前页显示的真实条数
total:总记录数
pages:总页数
prePage:上一页的页码
nextPage:下一页的页码
isFirstPage/isLastPage:是否为第一页/最后一页
hasPreviousPage/hasNextPage:是否存在上一页/下一页
navigatePages:导航分页的页码数
navigatepageNums:导航分页的页码,[1,2,3,4,5]


















