CRUD（18）：查询-构建员工列表
一、在webapp下重新创建index.jsp页面。
二、写ajax请求
<script type="text/javascript">
<!--页面加载完成以后直接发送一个ajax请求，拿到分页数据-->
$(function() {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=1",
type : "GET",
success : function(result) {
console.log(result);
}
});
});
</script>
三、解析显示员工数据
function build_emps_table(result) {
var emps = result.extend.pageInfo.list;
$.each(emps, function(index, item) {
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(
item.gender == 'm' ? "男" : "女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>")
.append(item.department.deptName);
var editBtn = $("<button></button>").addClass(
"btn btn-info btn-sm").append(
$("<span></span>").addClass(
"glyphicon
glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass(
"btn btn-danger btn-sm").append(
$("<span></span>")
.addClass("glyphicon
glyphicon-trash")).append(
"删除");
var btnTd = $("<td></td>").append(editBtn).append("
").append(delBtn);
//append方法执行完成以后还是返回原来的元素
$("<tr></tr>").append(empIdTd).append(empNameTd).append(
genderTd).append(emailTd).append(deptNameTd).append(
btnTd).appendTo("#emps_table tbody");
});
}
四、解析并显示分页信息
效果展示：
源代码：
<%@ 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>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 拿到当前项目路径，以/开始，不以/结束 -->
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 引入<u>jquery</u> -->
<script type="text/javascript"
src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<!-- 引入Bootstrap样式 -->
<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" id="emps_table">
<thead>
<tr>
<th>#</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="page_info_area"></div>
<!-- 分页条信息 -->
<div class="col-md-6" id="page_nav_area"></div>
</div>
</div>
<script type="text/javascript">
<!--页面加载完成以后直接发送一个ajax请求，拿到分页数据-->
$(function() {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=1",
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_emps_table(result) {
var emps = result.extend.pageInfo.list;
$.each(emps, function(index, item) {
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(
item.gender == 'm' ? "男" : "女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>")
.append(item.department.deptName);
var editBtn = $("<button></button>").addClass(
"btn btn-info btn-sm").append(
$("<span></span>").addClass(
"glyphicon
glyphicon-pencil")).append("编辑");
var delBtn = $("<button></button>").addClass(
"btn btn-danger btn-sm").append(
$("<span></span>")
.addClass("glyphicon
glyphicon-trash")).append(
"删除");
var btnTd = $("<td></td>").append(editBtn).append("
").append(
delBtn);
//append方法执行完成以后还是返回原来的元素
$("<tr></tr>").append(empIdTd).append(empNameTd).append(
genderTd).append(emailTd).append(deptNameTd).append(
btnTd).appendTo("#emps_table tbody");
});
}
//显示分页信息
function build_page_info(result) {
$("#page_info_area").append(
"当前第" + result.extend.pageInfo.pageNum + "页
共"
+ result.extend.pageInfo.pages +
"页 共"
+ result.extend.pageInfo.total +
"条记录");
}
//显示分页条
function build_page_nav(result) {
var ul = $("<ul></ul>").addClass("pagination");
var firstPageLi =
$("<li></li>").append($("<a></a>").append("首页"))
.attr("href", "#");
var prePageLi = $("<li></li>").append(
$("<a></a>").append("«"));
var nextPageLi = $("<li></li>").append(
$("<a></a>").append("»"));
var lastPageLi =
$("<li></li>").append($("<a></a>").append("末页"))
.attr("href", "#");
//添加首页和前一页的显示
ul.append(firstPageLi).append(prePageLi);
$.each(result.extend.pageInfo.navigatepageNums,
function(index,
item) {
var numLi =
$("<li></li>").append($("<a></a>").append(item));
//添加页码显示
ul.append(numLi);
});
//添加下一页和末页的显示
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
</script>
</body>
</html>
浙公网安备 33010602011771号