SSM整合_实现增删改查_查找
写在前面
SSM整合_年轻人的第一个增删改查_基础环境搭建
SSM整合_年轻人的第一个增删改查_查找
SSM整合_年轻人的第一个增删改查_新增
SSM整合_年轻人的第一个增删改查_修改
SSM整合_年轻人的第一个增删改查_删除
GitHub:https://github.com/say-hey/ssm_crud
Gitee:https://gitee.com/say-hey/ssm_crud
有用吗?对于学完Spring、SpringMVC、Mybatis还无从下手的同学来说这是一个很好引子。对于正在学习同一个案例的同学,可能解决一些问题。对于需要这个案例的同学可以直接获取。
有什么?:xml配置文件编写,引入一个简单的前端框架,使用MyBatis Generator逆向工程生成一些代码,使用框架简单快速搭建一个页面,好用的分页工具PageHelper,简单的前后端分离,发送ajax请求,利用json传递数据,增、删、改、查的简单实现。
简单吗?内容很简单,涉及Java代码不多,但是对于新手来说,最困难的部分是各种环境搭建、配置文件、版本冲突,如果能够根据错误提示动手解决,那就是一大进步。
怎么学?如果有时间可以在B站搜索:ssm整合crud,雷丰阳讲的。如果想看到每个功能的实现过程和源码,可以在这里学习,每个步骤都有注释。也可以作为复习快速浏览。
2、查询
分页查询、ajax请求、json数据、通用返回类型,效果如图
1. 测试分页请求
先配置,然后测试,通过之后进行真正的请求
使用MyBatis分页插件PageHelper进行分页
添加依赖
<!-- mybatis 分页插件pagehelper --><!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.2</version></dependency>
mybatis-config.xml
添加插件,注意标签顺序<!-- 使用pagehelper插件 --><plugins><plugin interceptor="com.github.pagehelper.PageInterceptor"><!-- 分页合理化,如果超出总页数,只显示最后一页,合理显示 --><property name="reasonable" value="true"/></plugin></plugins>
index.jsp
最上面添加转发请求<!-- 测试用 --> <!-- 来到这个页面直接去展示员工的控制器--> <jsp:forward page="/emps"></jsp:forward>
Controller
package com.ssm.controller;import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.ssm.bean.Employee; import com.ssm.service.EmployeeService; 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 java.util.List;/*** 处理员工增删改查请求*/ @Controller public class EmployeeController {@AutowiredEmployeeService employeeService;/*** 测试* 查询所有员工数据* 访问index.jsp首页查询所有数据并分页,将数据返回并跳转到list.jsp页面展示* @param pn 页码,默认第一页* @param model 传递出去的数据* @return*/@RequestMapping("/emps")public String testGetEmps(@RequestParam(value = "pn", defaultValue = "1")Integer pn, Model model){//使用分页插件//在使用之前只需要调用,传入页码,每页大小PageHelper.startPage(pn, 5);//startPage后面紧跟的就是一个分页查询List<Employee> emps = employeeService.getAll();//使用pageInfo包装查询后的结果,包括查询出来的数据,员工列表//封装员工,设置连续显示页码PageInfo<Employee> info = new PageInfo<>(emps, 5);//只需要将pageinfo交给页面,里面封装了详细分页信息model.addAttribute("pageInfo", info);return "list";} }
Service
package com.ssm.service;import com.ssm.bean.Employee; import com.ssm.dao.EmployeeMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;import java.util.List;@Service public class EmployeeService {@AutowiredEmployeeMapper employeeMapper;/*** 查询所有员工数据* @return*/public List<Employee> getAll() {//查询所有return employeeMapper.selectByExampleWithDept(null);} }
在
com.ssm.test
中进行测试注意@WebAppConfiguration
package com.ssm.test;import com.github.pagehelper.PageInfo; import com.ssm.bean.Employee;import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; import org.junit.jupiter.api.extension.ExtendWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.mock.web.MockHttpServletRequest; import org.springframework.test.context.ContextConfiguration; import org.springframework.test.context.junit.jupiter.SpringExtension; import org.springframework.test.context.web.WebAppConfiguration; import org.springframework.test.web.servlet.MockMvc; import org.springframework.test.web.servlet.MvcResult; import org.springframework.test.web.servlet.request.MockMvcRequestBuilders; import org.springframework.test.web.servlet.setup.MockMvcBuilders; import org.springframework.web.context.WebApplicationContext;import java.util.List;//添加springmvc到spring容器 @WebAppConfiguration //如果您想在测试中使用Spring测试框架功能(例如)@MockBean,则必须使用@ExtendWith(SpringExtension.class)。它取代了不推荐使用的JUnit4@RunWith(SpringJUnit4ClassRunner.class) @ExtendWith(SpringExtension.class) @ContextConfiguration(locations = {"classpath:applicationContext.xml","classpath:springmvc.xml"}) public class MvcTest {//传入springmvc的IOC,需要加注解@AutowiredWebApplicationContext context;//虚拟mvc请求,获取请求结果MockMvc mockMvc;//每次使用都初始化//junit4使用@Before,junit5使用@BeforeEach,在@Test方法之前运行@BeforeEach()public void initMockMvc() {//创建MockMVC,模拟mvc请求mockMvc = MockMvcBuilders.webAppContextSetup(context).build();}@Testpublic void testPage() throws Exception {//模拟发送请求拿到返回值,get,参数第八页,返回值MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "8")).andReturn();//请求成功后,请求域中会有pageInfo,取出 验证MockHttpServletRequest request = result.getRequest();PageInfo pageInfo = (PageInfo) request.getAttribute("pageInfo");System.out.println("当前页码:" + pageInfo.getPageNum());System.out.println("总页码:" + pageInfo.getPages());System.out.println("总记录数:" + pageInfo.getTotal());System.out.println("在页面连续显示页码");int[] nums = pageInfo.getNavigatepageNums();for (int i : nums) {System.out.print(i + " ");}System.out.println();//员工数据也封装在pageinfo中List<Employee> list = pageInfo.getList();for(Employee e : list) {System.out.println( e.getEmpId() + "--" +e.getEmpName() + "--" + e.getEmail());}} }
输出
当前页码:8 总页码:202 总记录数:1010 在页面连续显示页码 6 7 8 9 10 36--b242634--b242634@123.com 37--26a8135--26a8135@123.com 38--5c13f36--5c13f36@123.com 39--da7c437--da7c437@123.com 40--28a4438--28a4438@123.com
2. 搭建分页页面
使用任意方法创建页面,或者如下所示。主要内容是一个表格,可以查看Bootstrap教程,复制需要的样式,然后粘贴,稍微修改。
在
list.jsp
页面,添加下面代码<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%-- 是否忽略EL表达式,默认true,导致不能访问jsp域,PATH不生效--%> <%@ page isELIgnored="false"%> <html> <head><title>员工列表</title><%/* 设置路径 以“/”开始的相对路径是从服务下开始查找http://localhost:8080 */pageContext.setAttribute("PATH", request.getContextPath());%><script src="${PATH}/static/jquery-1.12.4.js"></script><script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body><!-- row行必须包含在container中 --><div class="container"><!-- 定义row行 --><!-- 标题 --><div class="row"><!-- 定义col列 --><div class="col-md-12"><h1>SSM_CRUD</h1></div></div><!-- 按钮 --><div class="row"><div class="col-md-2 col-md-offset-9"><button class="btn btn-primary" id="emp_add_modal_btn">新增</button><button class="btn btn-danger" id="emp_del_modal_btn">删除</button></div></div><!-- 显示表格 --><div class="row"><div class="col-md-12"><table class="table table-hover" id="emps_table"><!-- table table-striped--><!-- 对表格分组 table-thead-tbody-tfoot --><thead><tr><th><input type="checkbox" id="check_all"></th><th>#</th><th>EmpName</th><th>Gender</th><th>Email</th><th>DeptName</th><th>操作</th></tr></thead><tbody><!-- 手动添加数据测试 --><tr><td></td><td style="width: 80px">1</td><td>Tom</td><td>M</td><td style="width: 300px">Tom@123.com</td><td>研发部</td><td><button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>新增</button><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button></td></tr></tbody></table></div></div><!-- 分页数据 暂时占据位置,之后需要拼接--><div class="row"><div class="col-md-4" id="page_info_area">当前第xx页,总xx,总xx条数据</div><div class="col-md-6 col-md-offset-7" id="page_nav_area">首页 << 1 2 3 4 5 >> 尾页</div></div></div> </body> </html>
效果如下
3. 显示分页数据(JSTL)
添加JSTL表达式,然后从域中取出数据遍历到表格中
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %> <%-- 是否忽略EL表达式,默认true,导致不能访问jsp域,PATH不生效--%> <%@ page isELIgnored="false" %> <%-- 添加JSTL表达式 --%> <%--报错的可以把jstl引入改成:<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>--%> <%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>--%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <html> <head><title>员工列表</title><%/* 设置路径 以“/”开始的相对路径是从服务下开始查找http://localhost:8080 */pageContext.setAttribute("PATH", request.getContextPath());%><script src="${PATH}/static/jquery-1.12.4.js"></script><script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"></head> <body> <!-- row行必须包含在container中 --> <div class="container"><!-- 定义row行 --><!-- 标题 --><div class="row"><!-- 定义col列 --><div class="col-md-12"><h1>SSM_CRUD</h1></div></div><!-- 按钮 --><div class="row"><div class="col-md-2 col-md-offset-9"><button class="btn btn-primary" id="emp_add_modal_btn">新增</button><button class="btn btn-danger" id="emp_del_modal_btn">删除</button></div></div><!-- 显示表格 --><div class="row"><div class="col-md-12"><table class="table table-hover" id="emps_table"><!-- table table-striped--><!-- 对表格分组 table-thead-tbody-tfoot --><thead><tr><th><input type="checkbox" id="check_all"></th><th>#</th><th>EmpName</th><th>Gender</th><th>Email</th><th>DeptName</th><th>操作</th></tr></thead><tbody><%-- 手动添加数据测试 --%><%-- <tr><td></td><td style="width: 80px">1</td><td>Tom</td><td>M</td><td style="width: 300px">Tom@123.com</td><td>研发部</td><td><button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>新增</button><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button></td></tr>--%><!-- jstl表达式,取出后台发送数据 --><c:forEach items="${pageInfo.list}" var="p"><tr><td style="width: 80px">${p.empId}</td><td>${p.empName}</td><td>${p.gender=="M"?"男":"女"}</td><td style="width: 300px">${p.email}</td><td>${p.department.deptName}</td><td><button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>新增</button><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button></td></tr></c:forEach></tbody></table></div></div><!-- 分页数据 暂时占据位置,之后需要拼接--><div class="row"><div class="col-md-4" id="page_info_area">当前第xx页,总xx,总xx条数据</div><div class="col-md-6 col-md-offset-7" id="page_nav_area">首页 << 1 2 3 4 5 >> 尾页</div></div> </div> </body> </html>
访问测试
上述方法是使用JSP页面混合JSTL语言,高耦合。对于分页栏,也可以用相似的方法,使用Bootstrap样式,利用JSTL语句遍历PageHelper数据,具体可以看
https://www.bilibili.com/video/BV17W411g7zP?p=15
。
4. 返回分页json数据(Ajax)
使用json格式可以适用更多场景,需要引入
<!-- springmvc 返回json数据,@ResponseBody --><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.10.1</version></dependency>
注释掉以前的
/emps
重新编写方法,添加@ResponseBody注解,将分页部分移到Service中EmployeeController
@ResponseBody@RequestMapping("/emps")public PageInfo getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn) {PageInfo pageInfo = employeeService.getPage(pn);return pageInfo;}
EmployeeService
public PageInfo getPage(Integer pn) {// 分页查询PageHelper.startPage(pn, 5);List<Employee> emps = getAll();PageInfo<Employee> pageInfo = new PageInfo<>(emps, 5);return pageInfo;}
访问
/emps
,得到如下数据{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1010,"pages":202,"list":[{"empId":1,"empName":"Tom","gender":"M","email":"Tom@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":2,"empName":"ebeaf0","gender":"M","email":"ebeaf0@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":3,"empName":"0d4141","gender":"M","email":"0d4141@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":4,"empName":"85be92","gender":"M","email":"85be92@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":5,"empName":"2368d3","gender":"M","email":"2368d3@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"lastPage":5,"firstPage":1}
5. 通用返回类型
上面的方法只能传递PageHelper分页数据,如果是添加、删除操作,不能通知页面是否成功,所以要封装一个类,用来传递所有消息。
在
com.ssm.bean
中创建类package com.ssm.bean;import java.util.HashMap; import java.util.Map;/*** 通用返回类型*/ public class Msg {//状态码 2333成功 5555失败private Integer code;//提示信息private String msg;//用户返回给浏览器的数据private Map<String,Object> extend = new HashMap<>();//增加两个静态方法,一个成功,一个失败,再加一个添加数据的方法public static Msg success() {Msg result = new Msg();result.setCode(2333);result.setMsg("ʅ(´◔౪◔)ʃ");return result;}public static Msg fail() {Msg result = new Msg();result.setCode(5555);result.setMsg("o(゚Д゚)っ啥!");return result;}//添加查询出来的数据,public Msg add(String key,Object value) {// getExtend()就是Map的get方法,用于获取当前类的属性,然后再返回当前类,可以链式调用this.getExtend().put(key, value);return this;}public Integer getCode() {return code;}public void setCode(Integer code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public Map<String, Object> getExtend() {return extend;}public void setExtend(Map<String, Object> extend) {this.extend = extend;} }
修改
/emps
方法返回值类型@ResponseBody@RequestMapping("/emps")public Msg getEmpsWithJson(@RequestParam(value = "pn",defaultValue = "1")Integer pn) {PageInfo pageInfo = employeeService.getPage(pn);return Msg.success().add("pageInfo", pageInfo);}
访问
/emps
{"code":2333,"msg":"ʅ(´◔౪◔)ʃ","extend":{"PageInfo":{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1010,"pages":202,"list":[{"empId":1,"empName":"Tom","gender":"M","email":"Tom@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":2,"empName":"ebeaf0","gender":"M","email":"ebeaf0@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":3,"empName":"0d4141","gender":"M","email":"0d4141@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":4,"empName":"85be92","gender":"M","email":"85be92@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}},{"empId":5,"empName":"2368d3","gender":"M","email":"2368d3@123.com","dId":1,"department":{"deptId":1,"deptName":"开发部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"firstPage":1,"lastPage":5}}}
6. 构建员工列表
使用任意方法创建页面,或者如下所示
现在可以使用json数据,利用ajax发送请求,获取数据然后渲染到页面,就可以将分离前后端
新建一个
index.jsp
,将原始index.jsp
给名为index2.jsp
将
list.jsp
中的表格复制过来,并删掉JSTL相关语句<%-- 解决乱码 --%> <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%-- 是否忽略EL表达式,默认true,导致不能访问jsp域,PATH不生效--%> <%@ page isELIgnored="false" %> <html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head><%/* 设置路径 以“/”开始的相对路径是从服务下开始查找http://localhost:8080 */pageContext.setAttribute("PATH", request.getContextPath());%><script src="${PATH}/static/jquery-1.12.4.js"></script><script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><link href="${PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"></head> <body><div class="container"><!-- 定义row行 --><!-- 标题 --><div class="row"><!-- 定义col列 --><div class="col-md-12"><h1>SSM_CRUD</h1></div></div><!-- 按钮 --><div class="row"><div class="col-md-2 col-md-offset-9"><button class="btn btn-primary" id="emp_add_modal_btn">新增</button><button class="btn btn-danger" id="emp_del_modal_btn">删除</button></div></div><!-- 显示表格 --><div class="row"><div class="col-md-12"><table class="table table-hover" id="emps_table"><!-- table table-striped--><!-- 对表格分组 table-thead-tbody-tfoot --><thead><tr><th><input type="checkbox" id="check_all"></th><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-4" id="page_info_area"></div><div class="col-md-6 col-md-offset-7" id="page_nav_area"></div></div></div> </body> </html>
创建ajax请求
<script type="text/javascript">$(function() {$.ajax({url : "${PATH}/emps",// data : "pn=" + pn,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) {//每次构建之前要清空$("#emps_table tbody").empty();//获取到员工列表var emps = result.extend.pageInfo.list;//利用jQuery的each遍历,index:索引 item:当前对象$.each(emps, function(index, item) {//alert(item.empName);//创建出要展示的<td>标签var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");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);//1. 在修改删除按钮上统一添加 类标识 edit_btn delete_btnvar editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append("<span></span>").addClass("glyphicon glyphicon-pencil").append("编辑");//2. 在 编辑/删除 按钮上添加当前所选对象id.或者从这个的父层查找第一个tr第一个td的值editBtn.attr("edit-id",item.empId);var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append("<span></span>").addClass("glyphicon glyphicon-trash").append("删除");delBtn.attr("del-id",item.empId);//将俩个按钮放到td中去var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);//append方法执行完之后还返回原来的元素,就是tr,可以继续添加$("<tr></tr>").append(checkboxTd).append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptNameTd).append(btnTd)//添加到.appendTo("#emps_table tbody")});}</script>
7. 构建分页条
构建分页条,将请求提取为方法
<script type="text/javascript">//1.页面加载完成后,直接发送ajax请求,要到分页数据$(function() {//页面加载后去首页to_page(1);});//2.查询指定页数据function to_page(pn) {$.ajax({url : "${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) {//每次构建之前要清空$("#emps_table tbody").empty();//获取到员工列表var emps = result.extend.pageInfo.list;//利用jQuery的each遍历,index:索引 item:当前对象$.each(emps, function(index, item) {//alert(item.empName);//创建出要展示的<td>标签var checkboxTd = $("<td><input type='checkbox' class='check_item'/></td>");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);//1. 在修改删除按钮上统一添加 类标识 edit_btn delete_btnvar editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append("<span></span>").addClass("glyphicon glyphicon-pencil").append("编辑");//2. 在 编辑/删除 按钮上添加当前所选对象id.或者从这个的父层查找第一个tr第一个td的值editBtn.attr("edit-id",item.empId);var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append("<span></span>").addClass("glyphicon glyphicon-trash").append("删除");delBtn.attr("del-id",item.empId);//将俩个按钮放到td中去var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);//append方法执行完之后还返回原来的元素,就是tr,可以继续添加$("<tr></tr>").append(checkboxTd).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.extend.pageInfo.pageNum + "页,总"+ result.extend.pageInfo.pages + "页,总"+ result.extend.pageInfo.total + "条数据");//(后面用到)全局参数,获取总记录数,用来跳到最后一页totalRecord = result.extend.pageInfo.total;currentPage = result.extend.pageInfo.pageNum;}//构建分页栏function build_page_nav(result) {//每次构建之前要清空$("#page_nav_area").empty();var nav = $("<nav></nav>");var ul = $("<ul></ul>").addClass("pagination");//首页,尾页,上一页,下一页var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href", "#"));var prePageLi = $("<li></li>").append($("<a></a>").append($("<span></span>").append("«")));var nextPageLi = $("<li></li>").append($("<a></a>").append($("<span></span>").append("»")));//var prePageLi = $("<li></li>").append($("<a></a>").append("«"));//var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));//判断是否有前一页,如果没有则禁用,否则才添加点击事件if (result.extend.pageInfo.hasPreviousPage == false) {firstPageLi.addClass("disabled");prePageLi.addClass("disabled");} else {//为首页上一页添加点击事件firstPageLi.click(function() {to_page(1);})prePageLi.click(function() {to_page(result.extend.pageInfo.pageNum - 1);})}//判断是否有后一页,如果没有则禁用,否则才添加点击事件if (result.extend.pageInfo.hasNextPage == false) {lastPageLi.addClass("disabled");nextPageLi.addClass("disabled");} else {//为下一页尾页添加点击事件lastPageLi.click(function() {to_page(result.extend.pageInfo.pages);})nextPageLi.click(function() {to_page(result.extend.pageInfo.pageNum + 1);})}//1.添加首页和前一页ul.append(firstPageLi).append(prePageLi);//连续显示的页$.each(result.extend.pageInfo.navigatepageNums, function(index,item) {//2.添加连续的页var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));//设置当前页激活状态,如果当前页就是被遍历的页,添加激活样式if (result.extend.pageInfo.pageNum == item) {numLi.addClass("active");}//添加点击事件,这个li被点击就跳转 新请求会将数据再次渲染,页面就乱了,需清空numLi.click(function() {to_page(item);});ul.append(numLi);});//3.添加下一页和尾页ul.append(nextPageLi).append(lastPageLi);//4.将整个分页栏添加到合适位置$("#page_nav_area").append(ul);}</script>
8. 页面效果
SSM整合_实现增删改查_查找相关推荐
- SSM整合--简单的增删改查--修改用户信息
SSM整合--简单的增删改查 修改用户信息 修改用户信息 ## 根据id查找用户信息,显示在employ_update页面 ## 进行修改信息后,提交表单,保存数据### 1.根据id查询用户信息 h ...
- ssm整合(简单的增删改查)
1 创建maven web项目: 2 添加jar包(所有的依赖) <dependencies><dependency><groupId>junit</grou ...
- SSM整合之CRUD增删改查案例(非ajax版)
最终页面效果: 最终项目的目录结构 数据库表 表的设计: pom.xml <?xml version="1.0" encoding="UTF-8"?> ...
- java ssm框架做增删改查,使用SSM框架组合实现增删改查的功能
基于ssm框架组合的增删改查功能 ssm框架组合之前已经搭建完成了,下面基于该框架组合实现增删改查的功能,首先创建一个数据库和一张表: CREATE DATABASE `ssmteam` /*!401 ...
- Ignite集群搭建及整合SpringData实现增删改查
一.Ignite集群搭建 1.准备三个虚拟机.192.168.91.101.192.168.91.102.192.168.91.103 2.官网下载 Download - Apache Ignite ...
- 3. mysql的注解驱动的三种方式_上手spring boot项目(三)之spring boot整合mybatis进行增删改查的三种方式。...
1.引入依赖 org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot- ...
- python对excel增删改查_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
- sql增删改查_增删改查!sql2pandas方法手册
数据分析 Author:louwill Machine Learning Lab 作为一名数据分析师,利用SQL熟练的取数是一项必备的基础能力.除了SQL以外,Python的pandas也为我们提供了 ...
- python操作mysql的增删改查_详解使用pymysql在python中对mysql的增删改查操作(综合)...
这一次将使用pymysql来进行一次对MySQL的增删改查的全部操作,相当于对前五次的总结: 先查阅数据库: 现在编写源码进行增删改查操作,源码为: #!/usr/bin/python #coding ...
最新文章
- Java面向对象学习笔记 -- 6(内部类、Timer)
- TCP 和 UDP的理解
- Azure 中快速搭建 FTPS 服务
- LINQ的基本语法中八个关键字用法说明
- 027_jdbc-mysql几个常用的日期类型
- ASP调用存储过程详解。
- sklearn机器学习实例
- php if 单行,php – 单行if语句或if语句没有大括号坏习惯?
- 【报告分享】转变与机遇:从京东大数据看2020消费市场与品牌成长.pdf(附下载链接)...
- 独立的定义有多重等价表述方式
- python和Java实现斐波那契Fibonacci数列
- shell直接退出后 后台进程关闭的原因和对处
- HTML 标签的 enctype 属性
- 三线压力传感器原理_压力传感器接线图及原理介绍
- Oracle 并行操作
- 2021年中国兽医热疗室市场趋势报告、技术动态创新及2027年市场预测
- SpringBoot爬虫
- 为什么图像预处理矩阵要除以255?
- 使用不同的TCP端口架设多个网站
- java 歌词_网易云歌词爬取(java)
热门文章
- 为什么用 System.nanoTime() / 1000000 而不是 System.currentTimeMillis()?
- WinXP DDK的有效下载链接地址
- Java线程详解:wait、notify、notifyAll、join
- linux安装远程桌面,卸载删除
- 【闲来无聊写个几个小特效——五角星,小光圈,探照灯】
- 《深入分析GCC 》——第3章 GCC总体结构3.1 GCC的目录结构
- 帮铁粉脱单|【深圳女】No.14|93年,英语老师,本科157,喜欢健身,活泼开朗
- 通过QQ浏览器内核看browser性能优化
- 计算机辅助制造适合女生吗,女生学机械制造及其自动化好吗 好就业吗
- js与c语言互相调用,JavaScript与Objective-C的互相调用