index.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:forward page="/emps"></jsp:forward>list.jsp页面:
<%--
Created by IntelliJ IDEA.
User: nyh
Date: 2018/8/19
Time: 13:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<%--引入bootstrap--%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准(就是以打开当前页面时浏览上显示的路径为基准)，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
http://localhost:3306/crud
-->
<script type="text/javascript" src="${APP_PATH }/static/js/jquery-3.3.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-4 col-md-offset-4" style="text-align: center">
<h1>员工系统</h1>
</div>
</div>
<%--新增,删除按钮--%>
<div class="row" style="margin-top: 20px;">
<div class="col-md-12">
<button class="btn-primary btn-sm" style="margin-left: 74%;">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
新增
</button>
<button class="btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</div>
</div>
<%--显示员工数据--%>
<div class="row" style="margin-top: 20px">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>id</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-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
<button class="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: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>
<%--末页--%>
<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
<%--<style type="text/css">--%>
<%--div {border:black 1px solid;}--%>
<%--</style>--%>
</body>
</html>