1.搭建好SSM框架，引入PageHelper插件并配置好。【略】
2.EmployeeController.java
@Controller
public class EmployeeController {
// 1.【ajax】分页的请求接受
@RequestMapping(value = "/emps")
//将对象直接转换为json字符串
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
//为了分页方便，引入mybatis的pageHelper分页组件
//1.查询之前，调用pageHelper，默认1页，大小为5
PageHelper.startPage(pn, 5);
//2.紧跟着，这就是一个分页查询
List<Employee> emps = employeeService.getAll();
//3.pageInfo包装查询出来的数据，只需要将pageinfo交给页面皆可以了
//封装了详细的分页信息【查询出来的数据】,连续传入显示的5页,页码处于中间位置
PageInfo page = new PageInfo(emps, 5);
//不用放入到request域中，直接返回
return Msg.success().add("pageInfo", page);
}
// 2.【http】分页查询员工的数据
//@RequestMapping(value = "/emps")
public String getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
//为了分页方便，引入mybatis的pageHelper分页组件
//1.查询之前，调用pageHelper
PageHelper.startPage(pn, 5);
//2.这就是一个分页查询
List<Employee> emps = employeeService.getAll();
//3.pageInfo包装查询出来的数据，只需要将pageinfo交给页面皆可以了
//封装了详细的分页信息【查询出来的数据】,连续传入显示的5页
PageInfo page = new PageInfo(emps, 5);
//4.把分页所有的信息对象model设置到request域中
model.addAttribute("pageInfo", page);
System.out.println("进入到了controller");
//最后跳转页面
return "list";
}
}
2.http请求方式的页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<%--web路径
*不以‘/’开始的相对路径，以当前路径为基准
以‘/’开始的相对路径，以服务器根路径开始的基准
--%>
<%--引入bootstrap--%>
<link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<%--引入jquery--%>
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div class="container">
<%--标题--%>
<div class="row">
<div class="col-md-12">
<h1>SSM02_CRUD</h1>
</div>
</div>
<%--两个按钮--%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-success">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<%--显示数据--%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>department</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list}" var="emp">
<tr>
<th>${emp.empId}</th>
<th>${emp.empName}</th>
<th>${emp.gender=="M"?"男":"女"}</th>
<th>${emp.email}</th>
<th>${emp.department.deptName}</th>
<th>
<button class="btn btn-success 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>
</th>
</tr>
</c:forEach>
</table>
</div>
</div>
<%--分页信息--%>
<div class="row">
<%--分页的文字信息--%>
<div class="col-md-6">
<h3 style="color: blue">当前是第 ${pageInfo.pageNum} 页,总共有 ${pageInfo.pages} 页,一共有 ${pageInfo.total} 条记录。</h3>
</div>
<%--分页条--%>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<%--首页--%>
<li><a href="/ssm02/emps?pn=1">首页</a></li>
<%--判断是否含有上一页--%>
<c:if test="${pageInfo.hasPreviousPage}">
<li>
<a href="/ssm02/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<%--页码12345--%>
<c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
<c:if test="${page_Num == pageInfo.pageNum}">
<li class="active"><a href="#">${page_Num}</a></li>
</c:if>
<c:if test="${page_Num != pageInfo.pageNum}">
<li><a href="/ssm02/emps?pn=${page_Num }">${page_Num}</a></li>
</c:if>
</c:forEach>
<%--判断是否有下一页--%>
<c:if test="${pageInfo.hasNextPage}">
<li>
<a href="/ssm02/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<li><a href="/ssm02/emps?pn=${pageInfo.pages}">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
3.Msg.java 返回前端的json实体
//用来返回json的类
public class Msg {
//状态码
private int code;
//提示信息
private String msg;
//用户返回给浏览器的信息
private Map<String, Object> extend = new HashMap<String, Object>();
public static Msg success() {
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功！");
return result;
}
public static Msg fail() {
Msg result = new Msg();
result.setCode(400);
result.setMsg("处理失败！");
return result;
}
}
3.Ajax异步请求方式的页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<%--web路径
*不以‘/’开始的相对路径，以当前路径为基准
以‘/’开始的相对路径，以服务器根路径开始的基准
--%>
<%--引入bootstrap--%>
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<%--引入jquery--%>
<script type="text/javascript" src="static/js/jquery-2.1.0.min.js"></script>
</head>
<body>
<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empName_add_input"
placeholder="empName">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email_add_input"
placeholder="email@163.com">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_add_input" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<!-- 部门提交部门id即可 -->
<select class="form-control" name="dId">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<%--标题--%>
<div class="row">
<div class="col-md-12">
<h1>SSM02_CRUD</h1>
</div>
</div>
<%--两个按钮--%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-success" id="emp_add_modal_btn" data-target="#myModal">新增</button>
<button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
</div>
</div>
<%--显示数据--%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>
<input type="checkbox" id="check_all"/>
</th>
<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" id="page_info_area">
<h3 style="color: blue"></h3>
</div>
<%--分页条--%>
<div class="col-md-6" id="page_nav_area">
</div>
</div>
</div>
<script>
/*页面加载完成值后，直接发送一个ajax请求，请求分页数据*/
var totalRecord, currentPage;
//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);
}
});
}
//1.解析所有的员工数据
function build_emps_table(result) {
//清空table表格
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
//遍历数据
$.each(emps, function (index, item) {
//alert(item.empName);
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);
var editBtn = $("<button></button>").addClass("btn btn-success btn-sm edit-btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
//获取对应按钮的员工ID
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("删除");
//获取对应按钮的员工ID
delBtn.attr("del-id", item.empId);
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
$("<tr></tr>").append(checkBoxTd)
.append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
//2.解析显示分页信息
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 + " 条记录。");
}
//3. 解析显示分页条
function build_page_nav(result) {
$("#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.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);
});
}
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
//首页和前一页
if (result.extend.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
nextPageLi.click(function () {
to_page(result.extend.pageInfo.pageNum + 1);
});
lastPageLi.click(function () {
to_page(result.extend.pageInfo.pages);
});
}
ul.append(firstPageLi).append(prePageLi);
// 遍历页码
$.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
numLi.click(function () {
to_page(item);
});
ul.append(numLi);
});
// 末页和下一页
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//点击新增按钮弹出模态框。
$("#emp_add_modal_btn").click(function () {
//清除表单数据（表单完整重置（表单的数据，表单的样式））
//reset_form("#empAddModal form");
//s$("")[0].reset();
//发送ajax请求，查出部门信息，显示在下拉列表中
getDepts("#empAddModal select");
//弹出模态框
window.location.href = "/ssm02/add.jsp";
$("#empAddModal").modal({
backdrop: "static"
});
});
//点击编辑按钮回显信息，并且跳转页面
$(document).on("click", ".edit-btn", function () {
//回显部门信息，显示信息
getEmp($(this).attr("edit-id"));
window.location.href = "/ssm02/edit.jsp";
});
//回显员工信息
function getEmp(id) {
$.ajax({
url: "${APP_PATH}/emp/" + id,
type: "GET",
success: function (result) {
var empData = result.extend.emp;
$("#empName_add_input").text(empData.empName);
$("#email_add_input").val(empData.email);
//$("#oo input[name=gender]").val([empData.gender]);
//$("#").val([empData.dId]);
}
});
}
//删除员工的信息
$(document).on("click", ".delete-btn", function () {
//弹出提示框架
var empName = $(this).parents("tr").find("td:eq(2)").text();
var empId = $(this).attr("del-id");
if (confirm("确认删除【" + empName + "】吗？？？")) {
//确认后发送ajax请求
$.ajax({
url: "${APP_PATH}/emp/" + empId,
type: "DELETE",
success: function (result) {
alert(result.msg);
//回到本页面
window.location.href = "/ssm02/index.jsp";
}
});
}
});
//查出所有的部门信息并显示在下拉列表中
function getDepts(ele) {
//清空之前下拉列表的值
$(ele).empty();
$.ajax({
url: "/ssm02/depts",
type: "GET",
success: function (result) {
//{"code":100,"msg":"处理成功！",
//"extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
//console.log(result);
//显示部门信息在下拉列表中
//$("#empAddModal select").append("")
$.each(result.extend.depts, function () {
var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
optionEle.appendTo(ele);
});
}
});
}
//完成全选的操作
$("#check_all").click(function () {
$(".check_item").prop("checked", $(this).prop("checked"));
});
//当其余选项填满时候，最上面的元素也会选中
$(document).on("click", ".check_item", function () {
//判断院士是否为5个
var flag = $(".check_item:checked").length == $(".check_item").length;
$("#check_all").prop("checked", flag);
});
//删除选中 批量删除
$("#emp_delete_all_btn").click(function () {
//拼装姓名和要删除id的字符串
var empNames = "";
var del_idstr = "";
$.each($(".check_item:checked"), function () {
empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
});
//删除多余的字符串 都好 和 线
empNames = empNames.substring(0, empNames.length - 1);
del_idstr = del_idstr.substring(0, del_idstr.length - 1);
if (confirm("确认删除【" + empNames + "】吗？？？")) {
//发送ajax的请求，删除选中
$.ajax({
url: "${APP_PATH}/emp/" + del_idstr,
type: "DELETE",
success: function (result) {
alert(result.msg);
//回到当前页面
window.location.href = "/ssm02/index.jsp";
}
});
}
});
</script>
</body>
</html>
路人王
评论