接上一节。
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:forward page="/emps"></jsp:forward>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>跳转员工列表页面</title>
</head>
<body>
</body>
</html>
启动服务器之后，会默认访问index.jsp，在index.jsp中会请求"/emps"，即EmployeeController.java中的getEmps方法：
@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn,
Model model) {
PageHelper.startPage(pn,5);
List<Employee> emps = employeeService.getAll();
PageInfo<Employee> page = new PageInfo<>(emps,5);
model.addAttribute("pageInfo", page);
return "list";
}
在该方法中，传入一个参数pn，用于显示第N页，默认pn=1，我们通过PageHelper插件进行分页操作。
PageHelper.startPage：传入两个参数，第一个是从第几页开始显示，第二个参数是每页显示的条数。
当我们查询出所有的员工信息之后，可以利用PageInfo进行包装，PageInfo插入两个参数：第一个是相关信息，第二个参数是显示几页。
之后我们利用Model，将page装进pageInfo中，传给视图页面views文件夹下的list.jsp。
list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<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-CURD</h1>
</div>
</div>
<!-- 按钮-->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<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>epmName</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.dept.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">
<c:if test="${pageInfo.hasPreviousPage}">
<li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
<li>
<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</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>
<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
</c:if>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
说明：
（1）引入<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
（2）我们引入静态资源时，首先自定义APP_PATH来获得项目路径，最后整个静态资源比如bootstrap路径就是：
/curd_ssm/static/bootstrap-3.3.7-dist/css/bootstrap.min.css
（3）我们从后端传过来的pageInfo对象中可以取得员工信息，也可以取得分页信息。取得员工信息时，首先取得里面的员工集合pageInfo.list，并取别名为emp，再取相应的属性。取分页信息时，直接使用pageInfo对象即可。
（4）使用分页时，参考bootstrap模板。需要注意的有：
- 通过${pageInfo.hasPreviousPage}判断是否有前一页，如果有，则显示首页以及上一页标识：
使用上一页标识时 ，当点击它，发送请求${APP_PATH}/emps?pn=${pageInfo.pageNum-1}，使当前页-1。
- 通过${pageInfo.pageNum}获取当前页，${pageInfo.pages}获取总页数，${pageInfo.total}获取总记录数。
- 使用<c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">来获取所有导航页码，在其中如果导航页码就是我们当前页码，则将li的class属性设置为active，即进行加亮处理。如果不是，则当点击该导航页码时，发送请求${APP_PATH}/emps?pn=${page_Num}，跳转到该页。
- 通过${pageInfo.hasNextPage }判断是否有下一页，如果有，则显示下一页标识以及末页
启动服务器之后，输入localhost:8080/curd_ssm/，会先转到index.jsp页面，而index.jsp会请求/emps，跳转到list.jsp，
此时，是第一页，因此不显示上一页和首页，我们点击第二页。
此时首页和第一页就显示了，同理对于下一页和末页。
至此，基于bootstrap+分页的信息显示就完成了。下一节返回视图改为通过json来进行数据传输。