一、前期准备
1、在pom.xml中导入分页插件依赖
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.2.0</version>
</dependency>
2、在mybatis.xml中配置插件
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>
3、数据库表格数据（建议十条以上，这里我随意加了30条数据）
4、html页面头部添加thymeleaf约束
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
二、具体实现
1、dao层
<select id="getAllEmployee" resultType="Employee">
select * from t_emp
</select>
public interface EmployeeMapper {
/**
* 查询所有员工信息
* @return
*/
List<Employee> getAllEmployee();
}
2、service层
一定要在查询数据之前开启分页功能，最后得到page里面有很多封装好的数据，可以自己打印一下查看里面的数据。
分页相关数据：
pageNum：当前页的页码
pageSize：每页显示的条数
size：当前页显示的真实条数
total：总记录数
pages：总页数
prePage：上一页的页码
nextPage：下一页的页码
isFirstPage/isLastPage：是否为第一页/最后一页
hasPreviousPage/hasNextPage：是否存在上一页/下一页
navigatePages：导航分页的页码数
navigatepageNums：导航分页的页码，[1,2,3,4,5]
@Service
@Transactional
public class EmployeeServiceImpl implements EmployeeService {
@Autowired
private EmployeeMapper employeeMapper;
public PageInfo<Employee> getEmployeePage(Integer pageNum) {
//开启分页功能
PageHelper.startPage(pageNum,4);
//查询所有员工信息
List<Employee> list = employeeMapper.getAllEmployee();
//获取分页相关数据
PageInfo<Employee> page = new PageInfo<>(list,5);
return page;
}
}
public interface EmployeeService {
/**
* 获取员工的分页信息
* @param pageNum
* @return
*/
PageInfo<Employee> getEmployeePage(Integer pageNum);
}
2、controller层
这里用到了restful的请求方式，不指定请求方式也是可以的，用你自己熟悉的方式写也可以
@Controller
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@RequestMapping(value = "/employee/page/{pageNum}",method = RequestMethod.GET)
public String getEmployeePage(Model model,@PathVariable("pageNum") Integer pageNum){
//获取员工的分页信息
PageInfo<Employee> page = employeeService.getEmployeePage(pageNum);
//将分页数据共享到请求域中
model.addAttribute("page",page);
//跳转到employee_list.html
return "employee_list";
}
}
3、html前端页面
IDEA使用thymeleaf语法有些会报红，但是不影响使用
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>index.html</h1>
<a th:href="@{/employee}">查询所有员工信息</a>
<a th:href="@{/employee/page/1}">查询员工的分页信息</a>
</body>
</html>
利用上面提供的分页数据实现首页、上一页、下一页、末页，在第一页的时候首页不显示，在最后一页时末页不显示，标红当前所在页面的页码
employee_list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<table>
<tr>
<th>员工列表</th>
</tr>
<tr>
<th>流水号</th>
<th>员工姓名</th>
<th>年龄</th>
<th>性别</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<tr th:each="employee,status : ${page.list}">
<td th:text="${status.count}"></td>
<td th:text="${employee.empName}"></td>
<td th:text="${employee.age}"></td>
<td th:text="${employee.gender}"></td>
<td th:text="${employee.email}"></td>
<td>
<a href="">删除</a>
<a href="">修改</a>
</td>
</tr>
</table>
<div style="text-align: center">
<a th:if="${page.hasPreviousPage}" th:href="@{/employee/page/1}">首页</a>
<a th:if="${page.hasPreviousPage}" th:href="@{'/employee/page/'+${page.prePage}}">上一页</a>
<span th:each="num : ${page.navigatepageNums}">
<a th:if="${page.pageNum == num}" style="color: red" th:href="@{'/employee/page/'+${num}}" th:text="'['+${num}+']'"></a>
<a th:if="${page.pageNum != num}" th:href="@{'/employee/page/'+${num}}" th:text="${num}"></a>
</span>
<a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.nextPage}}">下一页</a>
<a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.pages}}">末页</a>
</div>
</body>
</html>
三、实现效果
首页
中间页
末页
