查询功能（Ajax版）

时间: 2019-04-15来源：OSCHINA

前景提要

【围观】麒麟芯片遭打压成绝版，华为亿元投入又砸向了哪里？>>>
当服务器启动发起请求时，原来在 index.jsp 下直接通过 <jsp:forward page="/emps"/> 发起请求。
此处，直接将 index.jsp 作为列表展示页。 <%@ page contentType="text/html;charset=UTF-8" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <html> <head> <title>SSM_AJAX</title> <script src="${ctx}/webjars/jquery/3.3.1-2/jquery.min.js"></script> </head> <body> <h1>SSM_AJAX</h1> <a href="${ctx}/emp" target="_blank">新增</a> <a href="#" id="batchDel">批量删除</a> <table width="50%" id="empTable"> <thead> <tr> <td><input type="checkbox" id="checkAll"/></td> <td>ID</td> <td>姓名</td> <td>性别</td> <td>邮箱</td> <td>部门</td> <td>操作</td> </tr> </thead> <tbody>  </tbody> </table> <br/>  <div id="pageInfoArea"></div> <div id="pageNavArea"></div> </body> </html>
这里不再通过 <c:forEah> 来遍历取值，而是通过当前页面发送Ajax请求，去后台取数据。且以 json 的格式返回数据，再使用DOM组装。 //保存当前页 var currentPage; //页面加载时，跳转到首页 $(function () { toPage(1); });
页面加载时，发起Ajax请求获取分页取数据。 //取数据 function toPage(pageNum) { $.ajax({ url: "${ctx}/emps", data: "pageNum=" + pageNum, type: "get", success: function (result) { //构建表格 buildEmpTable(result); //构建分页信息 buildPageInfo(result); //构建分页条 buildNavaInfo(result); } }); }
取得 json 数据后，开始构建表格、分页信息、分页条。 //构建表格 function buildEmpTable(result) { //构建前先清空 $("#empTable tbody").empty(); var emps = result.data.page.list; $.each(emps, function (index, item) { var checkboxTd = $("<td><input type='checkbox' class='checkItem' value='" + item.id + "'/></td>"); var id = $("<td>" + item.id + "</td>"); var name = $("<td>" + item.name + "</td>"); var gender = $("<td>" + (item.gender == 'M' ? '男' : '女') + "</td>"); var email = $("<td>" + item.email + "</td>"); var deptName = (item.dept != null) ? ($("<td>" + item.dept.name + "</td>")) : ($("<td></td>")); var editBtn = $("<a href='${ctx}/emp/" + item.id + "' target='_blank'>编辑</a>"); var delBtn = $("<a href='#' class='del'>删除</a>"); var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn); $("<tr></tr>") .append(checkboxTd) .append(id) .append(name) .append(gender) .append(email) .append(deptName) .append(btnTd) .appendTo($("#empTable tbody")); }); } //构建分页信息 function buildPageInfo(result) { //构建前先清空 $("#pageInfoArea").empty(); $("#pageInfoArea").append("当前" + result.data.page.pageNum + "页，总" + result.data.page.pages + "页，总" + result.data.page.total + "条记录"); //保存当前页变量 currentPage = result.data.page.pageNum; } //构建分页条 function buildNavaInfo(result) { //构建前先清空 $("#pageNavArea").empty(); // 首页 var firstPage = $("<a href='#'>首页</a>"); firstPage.click(function () { toPage(1); }); $("#pageNavArea").append(firstPage).append(" "); //上一页 var prePage = $("<a href='#'>上一页</a>"); if (result.data.page.hasPreviousPage) { prePage.click(function () { toPage(result.data.page.pageNum - 1); }); } else { prePage.hide(); } $("#pageNavArea").append(prePage).append(" "); //分页导航条 $.each(result.data.page.navigatepageNums, function (index, item) { var num = $("<a href='#'></a>").append(item); if (result.data.page.pageNum == item) { //使当前页数字体变大 num.css("font-size", "30px"); } num.click(function () { toPage(item); }); $("#pageNavArea").append(num).append(" "); }); //下一页 var nextPage = $("<a href='#'>下一页</a>"); if (result.data.page.hasNextPage) { nextPage.click(function () { toPage(result.data.page.pageNum + 1); }); } else { nextPage.hide(); } $("#pageNavArea").append(nextPage).append(" "); // 尾页 var lastPage = $("<a href='#'>尾页</a>"); lastPage.click(function () { toPage(result.data.page.pages); }); $("#pageNavArea").append(lastPage); }