1、访问 index.jsp 页面，index.jsp 页面进行请求转发，发送出查询员工列表请求
index.jsp
<%--
Created by IntelliJ IDEA.
User: Jay
Date: 2021/3/15
Time: 16:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:forward page="/emps"></jsp:forward>
2、EmployeeController 来接受请求，查出员工数据
EmployeeController .java
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/**
* 查询员工数据（分页查询）
* @return
*/
@RequestMapping("/emps")
public String getEmps(@RequestParam(value = "pn", defaultValue = "1")Integer pn, Model model) {
// 这不是一个分页查询
// 引入PageHelper分页插件
// 在查询之前只需要调用PageHelper.startPage()，传入页码以及每页的大小
PageHelper.startPage(pn, 5);
// PageHelper.startPage()后面紧跟的这个查询就是一个分页查询
List<Employee> emps = employeeService.getAll();
// 使用PageInfo包装查询后的结果，只需要将pageInfo交给页面就行了
// 封装了详细的分页信息，包括查询出来的数据，传入连续显示的页数
PageInfo pageInfo = new PageInfo(emps, 5);
model.addAttribute("pageInfo", pageInfo);
return "list";
}
}
3、来到 list.jsp 页面进行展示
<%--
Created by IntelliJ IDEA.
User: Jay
Date: 2021/3/19
Time: 14:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!--
web路径：
不以 / 开始的相对路径，找资源，以当前资源路径为基准，经常容易出问题。
以 / 开始的相对路径，找资源，以服务器的路径为标准（http://localhost:3360）；需要加上项目名
http://localhost:3360/ssm_crud
-->
<!-- 引入jQuery -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.9.1.min.js"></script>
<!-- 引入样式 -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<%-- 搭建显示页面 --%>
<div class="container">
<%-- 标题行 --%>
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<%-- 按钮：新增、删除 --%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<%-- 显示表格数据 --%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list}" var="emp">
<tr>
<th>${emp.empId}</th>
<th>${emp.empName}</th>
<th>${emp.gender=="M"?"男":"女"}</th>
<th>${emp.email}</th>
<th>${emp.department.deptName}</th>
<th>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</th>
</tr>
</c:forEach>
</table>
</div>
</div>
<%-- 显示分页信息 --%>
<div class="row">
<!-- 分页文字信息 -->
<div class="col-md-6">
当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总共${pageInfo.total}条记录，
</div>
<!-- 分页条信息 -->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
<c:if test="${pageInfo.hasPreviousPage}">
<li>
<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:if test="${!pageInfo.hasPreviousPage}">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
<c:if test="${page_Num == pageInfo.pageNum}">
<li class="active"><a href="#">${page_Num}</a></li>
</c:if>
<c:if test="${page_Num != pageInfo.pageNum}">
<li><a href="${APP_PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.hasNextPage}">
<li>
<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<c:if test="${!pageInfo.hasNextPage}">
<li class="disabled">
<span>
<span aria-hidden="true">»</span>
</span>
</li>
</c:if>
<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
4、引入的 jar 包：pagehelper、jsp
<!-- 引入PageHelper分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.2.0</version>
</dependency>
<!-- jsp -->
<!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>