Spring+SpringMVC+Mybatis实现增删改查--(三)SSM分页查询页面搭建(通过json请求)
查询
1.index.jsp页面直接发送ajax请求进行员工分页数据的查询
2.服务器将查出的数据,以json字符串的形式返回给游览器
3.游览器收到json字符串,可以使用js对json进行解析,使用js通过dom进行增加节点
具体操作流程:
1.src/main/java/com.lcz.crud.bean中新建Msg.java
Msg.java为一个通用的结果返回类,在其中定义状态码、提示信息以及用户要返回给游览器的数据
package com.lcz.crud.bean; /** * 通用的返回类 * @author LvChaoZhang * */ import java.util.HashMap; import java.util.Map; public class Msg { //状态码0成功 1失败 private int code; //提示信息 private String msg; //用户要返回给游览器的数据 private Map<String, Object> data=new HashMap<String, Object>(); public static Msg success() { Msg result = new Msg(); result.setCode(0); result.setMsg("处理成功"); return result; } public static Msg fail() { Msg result = new Msg(); result.setCode(1); result.setMsg("失败"); return result; } public Msg add(String key,Object value) { this.getData().put(key, value); return this; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Map<String, Object> getData() { return data; } public void setData(Map<String, Object> data) { this.data = data; } }
2.在src/main/java/com.lcz.crud.controller/EmployeeController.java
(1)重写查询方法,以json字符串的形式返回数据
package com.lcz.crud.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.lcz.crud.bean.Employee; import com.lcz.crud.bean.Msg; import com.lcz.crud.service.EmployeeService; /** * 处理员工CRUD请求 * @author LvChaoZhang * */ @Controller public class EmployeeController { @Autowired EmployeeService employeeService; /** * 导入jackson包 * @param pn * @param model * @return */ @RequestMapping("/emps")//发请求 @ResponseBody//表明以json字符串的形式返回数据 public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model ) { //这不是一个分页查询 //引入PageHelper分页插件 //在查询之前只需要调用,传入页面以及每页的大小 PageHelper.startPage(pn,5); //startpage后面紧跟的这个查询就是一个分页查询 List<Employee> emps=employeeService.getAll(); //用PageInfo对结果进行包装,只需要pageInfo交给页面,封装了详细的分页信息 //包括有我们查询出来的数据,传入连续显示的页数 PageInfo page = new PageInfo(emps,5); return Msg.success().add("pageInfo",page); } /** * 查询员工数据(分页查询) * @return */ }
(2)pom.xml中导入jackson包
<!-- 返回json字符串的支持 --> <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.5</version> </dependency>
(3)游览器访问json数据
3.重写index.jsp,在其中先搭建好界面
<%@ 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>员工列表</title> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!-- web路径: 不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。 以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:8080);需要加上项目名 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-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> <br> <!-- 显示表格数据 --> <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> </body> </html>
4.完善index.jsp
<%@ 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>员工列表</title> <% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!-- web路径: 不以/开始的相对路径,找资源,以当前资源的路径为基准,经常容易出问题。 以/开始的相对路径,找资源,以服务器的路径为标准(http://localhost:8080);需要加上项目名 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-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> <br> <!-- 显示表格数据 --> <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"> //1.页面加载完成之后,直接去发送一个ajax请求,要到分页数据 $(function () { //去首页 to_page(1); }); //跳转页码的功能 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_emps_table(result){ //清空table表格 $("#emps_table tbody").empty(); var emps=result.data.pageInfo.list;//所有的员工数据 //遍历所有的员工数据 $.each(emps,function(index,item){ //alert(item.empName); //构建表格 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); /** <button class="btn btn-primary btn-sm edit_btn"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑 </button> */ var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn") .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑"); var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm delete_btn") .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").empty(); $("#page_info_area").append("当前"+result.data.pageInfo.pageNum+"页,总共"+result.data.pageInfo.pages+"页,总共"+result.data.pageInfo.total+"记录数"); } /** <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> */ //解析并显示分页条,点击分页能去下一页.. function build_page_nav(result){ //page_nav_area //清空列表 $("#page_nav_area").empty(); var ul=$("<ul></ul>").addClass("pagination"); //首页 var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#")); //前一页 var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //如果没有前页的话,首页和前页隐藏 if(result.data.pageInfo.hasPreviousPage == false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); }else{ //为元素添加点击翻页的事件 //首页的点击事件 firstPageLi.click(function(){ to_page(1); }); //前一页的点击事件 prePageLi.click(function(){ to_page(result.data.pageInfo.pageNum -1); }); } //后一页 var nextPageLi = $("<li></li>").append($("<a></a>").append("»")); //末页 var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#")); //如果没有下一页的话,下一页的末页隐藏 if(result.data.pageInfo.hasNextPage == false){ nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); }else{ //下一页的点击事件 nextPageLi.click(function(){ to_page(result.data.pageInfo.pageNum +1); }); //末页的点击事件 lastPageLi.click(function(){ to_page(result.data.pageInfo.pages); }); } //添加首页和前一页 ul.append(firstPageLi).append(prePageLi); //遍历给ul添加页码提示 $.each(result.data.pageInfo.navigatepageNums,function(index,item){ var numLi = $("<li></li>").append($("<a></a>").append(item)); //按钮加深颜色 if(result.data.pageInfo.pageNum==item){ numLi.addClass("active"); } //页码的点击事件 numLi.click(function () { to_page(item); }); //遍历给ul添加页码提示 ul.append(numLi); }); //添加下一页和末页的提示 ul.append(nextPageLi).append(lastPageLi); //把ul加入到nav元素中 var navEle=$("<nav></nav>").append(ul); //把nav元素放到div中 navEle.appendTo("#page_nav_area"); } </script> </body> </html>