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、查看整个代码运行的结果：
