index.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" id="emps_tables">
<thead>
<tr>
<th>id</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<%--显示分页信息--%>
<div class="row">
<%--分页信息--%>
<div class="col-md-6" id="fyxx">
</div>
<%--分页条信息--%>
<div class="col-md-6" id="fyt">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
//去首页
to_page(1);
});
<%--页面加载完成后,直接发送一个ajax请求,,查询到员工分页数据--%>
//去第几页的方法
function to_page(pn) {
$.ajax({
url: "${APP_PATH}/emps",
data: "pn=" + pn,
type: "get",
success: function (result) {
// console.log(result);
//1.解析并显示员工数据
build_emps_table(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析显示分页条
build_page_nav(result);
}
});
}
//解析显示分页条
function build_page_nav(result) {
$("#fyt").empty();
var ul = $("<ul></ul>").addClass("pagination");
//首页
var firstPage = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
//上一页
var prePage = $("<li></li>").append($("<a></a>").append("«"));
//判断是否有上一页
if (result.extend.pageInfo.hasPreviousPage == false) {
firstPage.addClass("disabled");
prePage.addClass("disabled");
} else {
firstPage.click(function () {
to_page(1);
});
prePage.click(function () {
to_page(result.extend.pageInfo.pageNum - 1);
});
}
//下一页
var nextPage = $("<li></li>").append($("<a></a>").append("»"));
//末页
var endPage = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
//判断是否有下一页
if (result.extend.pageInfo.hasNextPage == false) {
nextPage.addClass("disabled");
endPage.addClass("disabled");
} else {
nextPage.click(function () {
to_page(result.extend.pageInfo.pageNum + 1);
})
endPage.click(function () {
to_page(result.extend.pageInfo.pages);
});
}
ul.append(firstPage).append(prePage);
$.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
var num = $("<li></li>").append($("<a></a>").append(item));
//判断是否是当前页,如果是就高亮显示
if (result.extend.pageInfo.pageNum == item) {
num.addClass("active");
}
//给分页条添加点击事件
num.click(function () {
to_page(item);
})
ul.append(num);
});
ul.append(nextPage).append(endPage);
var nav = $("<nav></nav>").append(ul);
nav.appendTo("#fyt");
}
//解析员工信息
function build_emps_table(result) {
//解析显示分页信息
//首先清空信息
$("#emps_tables tbody").empty();
var emps = result.extend.pageInfo.list;
/*使用jQuery提供的遍历方法:each(),
第一个参数- 要遍历的元素
第二个参数- 每次遍历的回调函数
*/
$.each(emps, function (index, item) {
var id = $("<td></td>").append(item.empId);
var name = $("<td></td>").append(item.empName);
var gender = $("<td></td>").append(item.gender == "M" ? "男" : "女");
var email = $("<td></td>").append(item.email);
var department = $("<td></td>").append(item.department.deptName);
/*<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>*/
var bianjibutton = $("<button></button>").addClass("btn-primary btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-plus").attr("aria-hidden", "true"))
.append("编辑");
var deletebutton = $("<button></button>").addClass("btn-danger btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-trash").attr("aria-hidden", "true"))
.append("删除");
var btn = $("<td></td>").append(bianjibutton).append(" ").append(deletebutton);
//能这么一直append()是因为append方法执行完后返回的还是原来的元素
$("<tr></tr>").append(id).append(name).append(gender).append(email).append(department)
.append(btn)
.appendTo("#emps_tables tbody");
});
}
function build_page_info(result) {
//清空信息
$("#fyxx").empty();
$("#fyxx").append("当前第" + result.extend.pageInfo.pageNum + "页,总共" +
result.extend.pageInfo.pages + "页,总共" +
result.extend.pageInfo.total + "条记录")
}
</script>
</body>
</html>