Ajax GET

@RequestMapping("/emps")
@ResponseBody
public Msg getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn, Model model) {
// 调用com.github.pagehelper.PageInterceptor包中方法
// 传入页码以及数据容量
PageHelper.startPage(pn, 8);
// 查询
List<Employee> emps = employeeservice.getAll();
// 将此封装交给页面，
PageInfo page = new PageInfo(emps, 5);
return Msg.success().add("pageInfo", page);
}

<script type="text/javascript"> ???var totalPagesUtil; ???//首页点击自动跳转第一页 ???$(function() { ???????to_page(1) ???}); ???//=============================================================================== ???//分页条信息跳转函数 ???function to_page(pn) { ???????$.ajax({ ???????????url : "${page}/emps", ???????????data : "pn=" + pn, ???????????type : "GET", ???????????success : function(result) { ???????????????//解析并显示员工 ???????????????build_emps_table(result); ???????????????//解析并显示分页信息 ???????????????build_page_info(result); ???????????????//解析并显示分页条 ???????????????build_page_nav(result); ???????????} ???????}); ???} ???//=============================================================================== ???//员工表格 ???function build_emps_table(result) { ???????//清空上一次遗留到的数据，给下一次请求 ???????$("#emps_table tbody").empty(); ???????//调出员工数据 ???????var emps = result.userMsg.pageInfo.list; ???????//jquery遍历 ???????$.each(emps, function(index, item) { ???????????//拼接一列 ???????????var empIdTd = $("<td></td>").append(item.empId); ???????????var empNameTd = $("<td></td>").append(item.empName); ???????????var genderTd = $("<td></td>").append(item.gender); ???????????var emailTd = $("<td></td>").append(item.email); ???????????var deptNameTd = $("<td></td>").append(item.department.deptName); ???????????//按钮拼接 ???????????var editBtnTd = $("<button></button>").addClass( ???????????????????"btn btn-primary btn-sm edit_Btn").append( ???????????????????$("<span></span>").addClass("glyphicon glyphicon-pencil")) ???????????????????.append("edit"); ???????????//为按钮绑定属性 ???????????editBtnTd.attr("editBtn_id", item.empId); ???????????var deleBtnTd = $("<button></button>").addClass( ???????????????????"btn btn-danger btn-sm dele_Btn").append( ???????????????????$("<span></span>").addClass("glyphicon glyphicon-trash")) ???????????????????.append("delete"); ???????????var editordeleTd = $("<td></td>").append(editBtnTd).append(" ") ???????????????????.append(deleBtnTd); ???????????//append方法执行完以后返回原来的元素 ???????????$("<tr></tr>").append(empIdTd).append(empNameTd).append(genderTd) ???????????????????.append(emailTd).append(deptNameTd).append(editordeleTd) ???????????????????.appendTo("#emps_table"); ???????}); ???} ???//=============================================================================== ???//分页信息显示 ???function build_page_info(result) { ???????//清空上一次遗留到的数据，给下一次请求 ???????$("#page_info_current").empty(); ???????$("#page_info_totalpage").empty(); ???????$("#page_info_totalcount").empty(); ???????$("#page_info_current").append("当前第").append( ???????????????"<span>" + result.userMsg.pageInfo.pageNum + "</span>").append( ???????????????"页"); ???????$("#page_info_totalpage").append("共").append( ???????????????"<span>" + result.userMsg.pageInfo.pages + "</span>").append( ???????????????"页"); ???????$("#page_info_totalcount").append("共").append( ???????????????"<span>" + result.userMsg.pageInfo.total + "</span>").append( ???????????????"条数据"); ???????//总记录数 ???????totalPagesUtil = result.userMsg.pageInfo.total; ???????//当前页数 ???????currentPage = result.userMsg.pageInfo.pageNum; ???} ???//=============================================================================== ???//分页条显示 ???function build_page_nav(result) { ???????//清空上一次遗留到的数据，给下一次请求 ???????$("#page_li").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("&laquo;")); ???????//判断是否上一页，禁用 ???????if (result.userMsg.pageInfo.hasPreviousPage == false) { ???????????prePageLi.addClass("disabled"); ???????} else { ???????????//不禁用时放行跳转 ???????????prePageLi.click(function() { ???????????????to_page(result.userMsg.pageInfo.pageNum - 1); ???????????}); ???????} ???????firstPageLi.click(function() { ???????????to_page(1); ???????}); ???????//=============================================================================== ???????var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;")); ???????//判断是否下页。禁用 ???????if (result.userMsg.pageInfo.hasNextPage == false) { ???????????nextPageLi.addClass("disabled"); ???????} else { ???????????//不禁用时放行跳转 ???????????nextPageLi.click(function() { ???????????????to_page(result.userMsg.pageInfo.pageNum + 1); ???????????}); ???????} ???????//末页 ???????var lastPageLi = $("<li></li>").append( ???????????????$("<a></a>").append("末页").attr("href", "#")); ???????lastPageLi.click(function() { ???????????to_page(result.userMsg.pageInfo.pages); ???????}) ???????//=============================================================================== ???????ul.append(firstPageLi).append(prePageLi); ???????//遍历连续页 ???????$.each(result.userMsg.pageInfo.navigatepageNums, function(index, item) { ???????????var numLi = $("<li></li>").append($("<a></a>").append(item)); ???????????//点击连续也跳转 ???????????numLi.click(function() { ???????????????to_page(item) ???????????}) ???????????//判断是否当前页显示状态 ???????????if (result.userMsg.pageInfo.pageNum == item) { ???????????????numLi.addClass("active"); ???????????} ???????????ul.append(numLi); ???????}) ???????//拼接下一页等 ???????ul.append(nextPageLi).append(lastPageLi); ???????var navEle = $("<nav></nav>").append(ul); ???????//拼接总分页到div中 ???????navEle.appendTo("#page_li"); ???}

<!-- 主页显示 --> ???<div class="container"> ???????<!-- 标题 --> ???????<div class="row"> ???????????<div class="col-md-12"> ???????????????<h1 align="center"> ???????????????????<i ???????????????????????class="layui-icon layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" ???????????????????????style="font-size: 30px;"></i> IntegrationSSM ???????????????</h1> ???????????</div> ???????</div> ???????<!-- 按钮 --> ???????<div class="row"> ???????????<div class="col-md-4"> ???????????????<!-- 搜索 --> ???????????????<div class="input-group"> ???????????????????<input type="text" class="form-control" ???????????????????????placeholder="Search name or email or department..."> <span ???????????????????????class="input-group-btn"> ???????????????????????<button class="btn btn-default" type="button"> ???????????????????????????<span class="glyphicon glyphicon-search" aria-hidden="true"></span> ???????????????????????????search! ???????????????????????</button> ???????????????????</span> ???????????????</div> ???????????</div> ???????????<!-- 中间部分 --> ???????????<div class="col-md-4"></div> ???????????<!-- 按钮 --> ???????????<div class="col-md-4"> ???????????????<button type="button" class="btn btn-primary" id="btn_add_index"> ???????????????????<i class="layui-icon layui-icon-add-1"></i> add ???????????????</button> ???????????????<button type="button" class="btn btn-danger"> ???????????????????<!-- <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> --> ???????????????????<i class="layui-icon layui-icon-close"></i> delete ???????????????</button> ???????????</div> ???????</div> ???????<br> <br> <br> ???????<!-- 表格 --> ???????<div class="row"> ???????????<div class="col-md-12"> ???????????????<table class="table table-hover" id="emps_table"> ???????????????????<thead> ???????????????????????<tr> ???????????????????????????<td>id</td> ???????????????????????????<td>name</td> ???????????????????????????<td>grader</td> ???????????????????????????<td>email</td> ???????????????????????????<td>department</td> ???????????????????????????<td>operator</td> ???????????????????????</tr> ???????????????????</thead> ???????????????????<tbody> ???????????????????</tbody> ???????????????</table> ???????????</div> ???????</div> ???????<!-- 分页 --> ???????<div class="row"> ???????????<div class="col-md-8" id="page_li"></div> ???????????<div class="col-md-4"> ???????????????<div class="btn btn-default btn-lg btn-sm" disabled="disabled" ???????????????????id="page_info_current"> ???????????????????<!-- 不可点击 --> ???????????????</div> ???????????????<div class="btn btn-default btn-lg btn-sm" disabled="disabled" ???????????????????id="page_info_totalpage"> ???????????????????<!-- 不可点击 --> ???????????????</div> ???????????????<div class="btn btn-default btn-lg btn-sm" disabled="disabled" ???????????????????id="page_info_totalcount"> ???????????????????<!-- 不可点击 --> ???????????????</div> ???????????</div> ???????</div> ???</div>