SpringMVC使用JSON数据在bootstrap构建dom列表
1、页面加载完成之后，直接去发送一个ajax请求，得到分页数据:
<script type="text/javascript">
$(function() {
$.ajax({
url:"${APP_PATH}/emps",
data:"pn=1",
type:"get",
success:function(result) {
console.log(result);
}
});
});
</script>
2、解析json数据，并显示员工数据。
function build_emps_table(result) {
var emps = result.extend.pageInfo.list;
$.each(emps,function(index,item) {
var empId = $("<td></td>").append(item.empId);
var empName = $("<td></td>").append(item.empName);
var genderId = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailId = $("<td></td>").append(item.email);
var deptName = $("<td></td>").append(item.dId);
$("<tr></tr>").append(empId).append(empName).
append(genderId).append(emailId).append(deptName).
appendTo("#emps_table tbody");
});
}
3、整个列表数据展示代码如下，运行结果如图：
<script type="text/javascript">
$(function() {
$.ajax({
url:"${APP_PATH}/emps",
data:"pn=1",
type:"get",
success:function(result) {
build_emps_table(result);
}
});
});
function build_emps_table(result) {
var emps = result.extend.pageInfo.list;
$.each(emps,function(index,item) {
var empId = $("<td></td>").append(item.empId);
var empName = $("<td></td>").append(item.empName);
var genderId = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailId = $("<td></td>").append(item.email);
var deptName = $("<td></td>").append(item.dId);
$("<tr></tr>").append(empId).append(empName).
append(genderId).append(emailId).append(deptName).
appendTo("#emps_table tbody");
});
}
function build_page_nav(result) {
}
</script>
4、添加数据列表按钮设置。
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm").
append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
5、两个按钮代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<html>
<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>department</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- 显示分页信息 -->
<div class="row">
<div class="col-md-6">
当前第 页，总共 页,总 条记录。
</div>
<div class="col-md-6">
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
$.ajax({
url:"${APP_PATH}/emps",
data:"pn=1",
type:"get",
success:function(result) {
build_emps_table(result);
}
});
});
function build_emps_table(result) {
var emps = result.extend.pageInfo.list;
$.each(emps,function(index,item) {
var empId = $("<td></td>").append(item.empId);
var empName = $("<td></td>").append(item.empName);
var genderId = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailId = $("<td></td>").append(item.email);
var deptName = $("<td></td>").append(item.dId);
var editBtn = $("<button></button>").addClass("btn btn-primary 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("删除");;
$("<tr></tr>").append(empId).append(empName).
append(genderId).append(emailId).append(deptName).append(editBtn).append(delBtn).
appendTo("#emps_table tbody");
});
}
function build_page_nav(result) {
}
</script>
</html>
6、查看整个代码运行的结果：
