SSM框架AJAX分頁 PageHelper查詢,增刪改前端業務邏輯

阿新 • • 發佈：2019-01-24

//定義全域性變數，總記錄數 var totalRecord,currentPage; //頁面載入完成以後，直接去傳送ajax請求，要到分頁資料 $(function(){ //頁面載入完預設進首頁 to_page(1); }); //點選頁面時，實現頁碼跳轉 function to_page(pn){ $.ajax({ url:"${APP_PATH}/empwithdeptjson", data:"pn="

+pn,//pn是使用者指定跳轉的頁碼數 type:"post", //請求成功的回撥函式，result是伺服器響應給瀏覽器的資料 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(); //獲取json串中返回的結果集（庫表中的資料） var emps=result.extend.pageInfo.list; //迴圈遍歷結果集==>迴圈遍歷所有員工資料

//引數1：要遍歷的emps集合，引數2:每次遍歷的回撥函式 //回撥函式：引數1：索引，引數2：當前物件 $.each(emps,function(index,item){ //alert(item.empName); //把解析的資料放到表格中展示，以下的DOM解析表格 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 gender=item.gender=='M'?"男":"女"; 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"> <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> */ var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn") .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append(" ").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(" ").append("刪除"); //為刪除按鈕新增一個自定義的屬性，來表示當前刪除的員工id delBtn.attr("del-id",item.empId); var btnTd=$("<td></td>").append(editBtn).append(" ").append(delBtn); //append方法執行完成以後還是返回原來的元素 $("<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; } /* <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").empty(); //page_nav_area //建立ul var ul=$("<ul></ul>").addClass("pagination"); //首頁 var firstPageLi=$("<li></li>").append($("<a></a>").append("首頁").attr("href","#")); //前一頁 var prePageLi=$("<li></li>").append($("<a></a>").append($("<span></span>").append("«"))); //如果沒有了前一頁，首頁和前一頁按鈕不可用 if(result.extend.pageInfo.hasPreviousPage==false){ firstPageLi.addClass("disabled"); prePageLi.addClass("disabled"); } //為元素新增點選翻頁事件 //首頁單擊事件 firstPageLi.click(function(){ to_page(1); }); //上一頁單擊事件:當前頁-1 prePageLi.click(function(){ to_page(result.extend.pageInfo.pageNum-1); }); //後一頁 var nextPageLi=$("<li></li>").append($("<a></a>").append($("<span></span>").append("»"))); //末頁 var lastPageLi=$("<li></li>").append($("<a></a>").append("末頁").attr("href","#")); //如果沒有了下一頁，末頁和下一頁按鈕不可用 if(result.extend.pageInfo.hasNextPage==false){ nextPageLi.addClass("disabled"); lastPageLi.addClass("disabled"); } //下一頁的單擊事件：當前頁+1 nextPageLi.click(function(){ to_page(result.extend.pageInfo.pageNum+1); }); lastPageLi.click(function(){ to_page(result.extend.pageInfo.pages); }); //新增首頁和前一頁的提示 ul.append(firstPageLi).append(prePageLi); //迴圈遍歷給ul中新增頁碼提示，取出頁碼號 1,2,3,4,5， $.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); //建立nav,將ul標籤新增到nav標籤中 var nav=$("<nav></nav>").append(ul); //將分頁條新增到上面id中 nav.appendTo("#page_nav_area"); } // 清除表單資料（表單重置--表單的資料，表單的樣式） function reset_form(ele){ $(ele)[0].reset();//清空表單資料，防止再次開啟模態框時，帶有之前新增的的資料 //清空模態框表單中上次殘留的樣式 $(ele).find("*").removeClass("has-error has-success"); $(ele).find(".help-block").text(""); } //點選新增按鈕彈出模態框 $("#emp_add_model_btn").click(function(){ //1.清除表單資料（表單重置--表單的資料，表單的樣式）,獲取表單,jquery沒有reset()方法，需要轉成原生物件 // $("#empAddModal form")[0].reset(); -->統一寫一個函式，見上面 reset_form("#empAddModal form"); //2.傳送ajax請求，查出部門資訊，顯示在下拉列表中 getDepts("#dept_add_select"); //3.彈出模態框 $("#empAddModal").modal({ backdrop:"static" }); }); //查出所有部門資訊，顯示在下拉列表中 function getDepts(ele){ $(ele).empty(); //$("#dept_add_select").empty(); $.ajax({ //向後臺傳送請求 url:"${APP_PATH}/depts", type:"GET", //拿到請求查詢的結果result success:function(result){ //console.log(result) //{"code":100,"msg":"處理成功","extend":{"depts":[{"deptId":1,"deptName":"開發部"},{"deptId":2,"deptName":"測試部"}]}} //顯示部門資訊到下拉列表中,有2種獲取下拉列表的方式 //$("#empAddModal select") //$("#dept_add_select") //迴圈遍歷部門資訊 $.each(result.extend.depts,function(){ var optionEle=$("<option></option>").append(this.deptName).attr("value",this.deptId); optionEle.appendTo(ele); }) } }); } //前端校驗：校驗表單資料 function validate_add_form(){ //1.拿到要校驗的資料（通過id獲取），使用正則表示式 var empName=$("#empName_add_input").val();//獲取文字框的值 var regName=/(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/; // alert(regName.test(empName)); if(!regName.test(empName)){//如果校驗失敗 //alert("使用者名稱可以是2-5位中文或者6-16位英文和數字的組合"); // 給input文字框的父元素新增提示樣式,文字框變色 show_validate_msg("#empName_add_input","error","使用者名稱可以是2-5位中文或者6-16位英文和數字的組合"); return false; //校驗失敗，返回false不在向下執行 }else{ show_validate_msg("#empName_add_input","success",""); //$("#empName_add_input").parent().addClass("has-success"); //$("#empName_add_input").next("span").text(""); } //2.校驗郵箱 var email=$("#email_add_input").val();//獲取郵箱的文字框的值 var regEmail=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/; if(!regEmail.test(email)){ //alert("郵箱格式不正確"); //應該清空這個元素之前的樣式 show_validate_msg("#email_add_input","error","郵箱格式不正確"); //$("#email_add_input").parent().addClass("has-error"); //$("#email_add_input").next("span").text("郵箱格式不正確"); return false; }else{ show_validate_msg("#email_add_input","success",""); //$("#email_add_input").parent().addClass("has-success"); //$("#email_add_input").next("span").text(""); } return true; } //顯示校驗結果的提示資訊模板 function show_validate_msg(ele,status,msg){ //清除當前元素的校驗狀態 $(ele).parent().removeClass("has-success has-error"); $(ele).next("span").text(""); if("success"==status){ $(ele).parent().addClass("has-success"); $(ele).next("span").text(msg); }else if("error"==status){ $(ele).parent().addClass("has-error"); //獲取當前輸入框元素的下一個元素span,將span元素的文字值設定成提示資訊 $(ele).next("span").text(msg); } } //繫結文字框改變事件：當文字框裡面的內容發生改變以後，檢驗使用者名稱是否可用 $("#empName_add_input").change(function(){ var empName=this.value; //alert("*****"+empName); //var empName=$("#empName_add_input").val(); //傳送ajax請求校驗使用者名稱是否可用 $.ajax({ url:"${APP_PATH}/checkuser", type:"POST", data:"empName="+empName, dataType:"json", success:function(result){ if(result.code==100){ $("#emp_save_btn").attr("ajax-va","success"); show_validate_msg("#empName_add_input","success","使用者名稱可用"); }else{ show_validate_msg("#empName_add_input","error",result.extend.va_msg);//result.extend.va_msg：獲取後臺資料 --該使用者名稱不可以使用 $("#emp_save_btn").attr("ajax-va","error"); } } }); }); //儲存按鈕的單擊事件，實現點選按鈕儲存員工資料 $("#emp_save_btn").click(function(){ //模態框中填寫的表單資料提交給伺服器進行儲存 //1.先要對提交給伺服器的資料進行校驗,前端校驗,註釋掉可以測試後端JSR303校驗 if(!validate_add_form()){ return false; }; //判斷之前的ajax使用者名稱校驗是否成功，如果使用者名稱已存在，則儲存按鈕不可用 //獲取當前按鈕的屬性值 if($("#emp_save_btn").attr("ajax-va")=="error"){ return false; } //2.傳送ajax請求儲存員工,serialize()序列表表格內容為字串，用於Ajax請求 //獲取表單,並將表單序列化empName=%E5%AD%9D%E6%B8%85&email=xiaoqing%40163.com&gender=F&dId=2 //alert($("#empAddModal form").serialize()); $.ajax({ url:"${APP_PATH}/emp", type:"POST", data:$("#empAddModal form").serialize(), success:function(result){ //{"code":100,"msg":"處理成功","extend":{"depts":[{"deptId":1,"deptName":"開發部"},{"deptId":2,"deptName":"測試部"}]}} // alert(result.msg); if(result.code==100){ // 員工儲存成功後： // 1.關閉模態框 $('#empAddModal').modal('hide'); // 2、來到最後一頁，顯示剛才儲存的資料 //傳送ajax請求，顯示最後一頁資料即可 to_page(totalRecord); }else{ //JSR303後端校驗失敗，顯示失敗資訊 console.log(result);//Objectcode: 200 extend: Objectmsg: "處理失敗"__proto__: Object //有那個欄位的錯誤資訊就顯示那個欄位的資訊 alert(result.extend.errorFields.email); alert(result.extend.errorFields.empName); if(undefined!=result.extend.errorFields.email){ //顯示郵箱錯誤資訊 show_validate_msg("#email_add_input","error",result.extend.errorFields.email); } if(undefined!=result.extend.errorFields.empName){ //顯示員工名字的錯誤資訊 show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName); } } } }) }); // 給jquery動態建立的編輯按鈕繫結事件，沒有id屬性的按鈕，給class屬性的一個值繫結單擊事件 $(document).on("click",".edit_btn",function(){ //alert("繫結單擊事件"); //1.查出部門資訊，並顯示部門列表 getDepts("#dept_update_select") //getDepts("#empUpdateModal select") //2.查出員工資訊，顯示員工資訊 //getEmp(id);//?如何獲取每一個編輯按鈕的員工id-->editBtn.attr("edit-id",item.empId); getEmp($(this).attr("edit-id")); //this代表當前被點選的按鈕 //3.把員工id傳遞給模態框的更新按鈕 $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id")); //4.彈出模態框 $("#empUpdateModal").modal({ backdrop:"static" }); }) //查出員工資訊，顯示員工資訊 function getEmp(id){ $.ajax({ url:"${APP_PATH}/emp/"+id, //@RequestMapping(value="/emp/{id}",method=RequestMethod.GET) type:"GET", success:function(result){ //console.log(result); //獲取到服務端返回的所有員工資料 var empData=result.extend.emp; $("#empName_update_static").text(empData.empName);//給p標籤之類的賦值用text()屬性 $("#email_update_input").val(empData.email);//給文字框賦值用val()屬性 // 獲取單選按鈕的方法有多種 $("#empUpdateModa input[name=gender]") $("#empUpdateModal input[type=radio]").val([empData.gender]); //給下拉列表賦值 $("#empUpdateModal select").val([empData.dId]); } }) } //修改：給更新按鈕繫結單擊事件 $("#emp_update_btn").click(function(){ //1.驗證郵箱是否合法 var email=$("#email_update_input").val();//獲取郵箱的文字框的值 var regEmail=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/; if(!regEmail.test(email)){ //alert("郵箱格式不正確"); //應該清空這個元素之前的樣式 show_validate_msg("email_update_input","error","郵箱格式不正確"); //$("#email_add_input").parent().addClass("has-error"); //$("#email_add_input").next("span").text("郵箱格式不正確"); return false; }else{ show_validate_msg("#email_update_input","success",""); //$("#email_add_input").parent().addClass("has-success"); //$("#email_add_input").next("span").text(""); } //2.傳送ajax資料，儲存修改的資料 $.ajax({ //如何獲取頁面的員工id-->把員工id的值繫結到更新按鈕上 url:"${APP_PATH}/emp/"+$(this).attr("edit-id"), type:"PUT", //<filter-name>HttpPutFormContentFilter</filter-name> data:$("#empUpdateModal form").serialize(), //type:"POST", //data:$("#empUpdateModal form").serialize()+"&_method=PUT", success:function(result){ //console.log(result); //alert(result.msg); //關閉模態框 $("#empUpdateModal").modal("hide"); //回到本頁面,如何做到-->全域性變數：currentPage to_page(currentPage); } }); }); //單個刪除：給jquery動態建立的刪除按鈕繫結事件，沒有id屬性的按鈕，給class屬性的一個值繫結單擊事件 $(document).on("click",".delete_btn",function(){ //1.彈出是否確認刪除對話方塊 //(1)如何獲取員工姓名:獲取當前按鈕的所有祖先節點，在找第二個<td> //alert($(this).parents("tr").find("td:eq(1)").text()); var empName=$(this).parents("tr").find("td:eq(2)").text(); var empId=$(this).attr("del-id"); if(confirm("確認刪除【"+empName+"】嗎？")){ //確認，傳送ajax請求刪除即可 $.ajax({ //給刪除按鈕繫結id url:"${APP_PATH}/emp/"+empId, type:"DELETE", success:function(result){ //alert(result.msg); //回到本頁 to_page(currentPage); } }); } }); //完成全選/全不選的事件功能 $("#check_all").click(function(){ //attr獲取checked是undefined; //我們這些dom原生的屬性比如checked，我們用prop()獲取原生的屬性值，而attr獲取自定義屬性的值 //prop修改和讀取dom原生屬性值 //alert($(this).prop("checked")); //選中標題行的複選框，下面的複選框跟著一起選中 $(".check_item").prop("checked",$(this).prop("checked")); }); //全部選中表格體中的複選框時，上面標題中的複選框也跟著選中 $(document).on("click",".check_item",function(){ //alert($(".check_item:checked").length); var flag = $(".check_item:checked").length==$(".check_item").length; $("#check_all").prop("checked",flag); }); //批量刪除的單擊事件 $("#emp_delete_all_btn").click(function(){ var empNames =""; var del_idstr =""; //先找到被選中的複選框,然後迴圈遍歷 $.each($(".check_item:checked"),function(){ //this代表當前被迴圈到的複選框,列印所有選中的員工姓名 //alert($(this).parents("tr").find("td:eq(2)").text()); empNames+=$(this).parents("tr").find("td:eq(2)").text() +","; //組裝員工id的字串 del_idstr+=$(this).parents("tr").find("td:eq(1)").text() +"-"; }); //去除empNames多餘的逗號， empNames=empNames.substring(0,empNames.length-1); //去除del_idstr對於的“-” del_idstr=del_idstr.substring(0,empNames.length-1); if(confirm("確認刪除【"+empNames+"】嗎？")){ //為true時，確認刪除name的值，傳送ajax請求 $.ajax({ url:"${APP_PATH}/emp/"+del_idstr, type:"DELETE", success:function(result){ alert(result.msg); //回到當前頁面 to_page(currentPage); } }) } });

SSM框架AJAX分頁 PageHelper查詢,增刪改前端業務邏輯

SSM框架AJAX分頁 PageHelper查詢,增刪改前端業務邏輯

SSM框架實現分頁查詢

SSM框架下分頁的實現（封裝page.java和List<?>）

SSM框架下分頁的實現（封裝page.java和List）

ssm框架實現分頁（limit）

SSM框架實現分頁，返回分頁的JSON資料

SSM框架——實現分頁和搜尋分頁

SSM框架+easyUI分頁

SSM框架整合ElasticSearch實現資料的增刪改查實戰案例

微服務架構實戰篇（三）：Spring boot2.0 + Mybatis + PageHelper實現增刪改查和分頁查詢功能

ajax分頁查詢信息的通用方法

php中laravel框架之ajax分頁

springboot jpa 分頁查詢(增刪改查)總結

MVCEasyUI+jQuery+EF+Ajax實現分頁+條件查詢

springmvc+mybatis+pagehelper+datatable前後端Ajax分頁

springboot jpa 分頁查詢(增刪改查)整理

springMVC+spring+mybatis 框架下分頁查詢

ssm-crud專案——分頁查詢

一站式分頁解決方案:後臺分頁PageHelper使用,頁面分頁,非同步ajax分頁pageutils.js

ajax分頁

SSM框架AJAX分頁 PageHelper查詢,增刪改 前端業務邏輯

相關推薦

SSM框架AJAX分頁 PageHelper查詢,增刪改前端業務邏輯