Detailed explanation of AJAX and SpringMVC to implement the paging query function of bootstrap modal box

function getManagerList(dealerId,page2){ macAddress = document.getElementById("activeXDemo").getMac(); $.get("${ctxPath}/common/dealer/manager?"+Math.random(), { page2: page2, pageSize2: 9, dealerId: dealerId, macAddress:macAddress }, function(data){ if(data){ var managerList=data.managerList; var uploadDir=data.uploadDir; var rs = ""; for (var i=0;i"+name+"
 "; } $('#managerList').empty(); $('#managerList').append(rs); var page2=data.page2; var stor_no2=data.stor_no2; var pageCount2=data.pageCount2; var pagination = ""; pagination+="
"; pagination=pagination+"
第 "+(page2 + 1); pagination=pagination+" 页/共 "+pageCount2+" 页
"; pagination += "
« 首页
"; if(page2>0){ pagination += "
« 上一页
"; } var start=page2-3; var end=page2+3; if(start<0){ end=end-start; } if(end >(pageCount2-1)){ end = pageCount2-1; start=end -7; } for(var j=start;j<=end;j++){ if(j>-1 && j"+(j+1)+""; }else{ pagination += "
"+(j+1)+"
"; } } } if(page2下一页 »"; } pagination += "
« 尾页
"; $('#pagination').empty(); $('#pagination').append(pagination); $('#personAddModel').modal('show'); } } ); } 

 
 
 
 ×Close 经营人员 
 
 
 
 
 
 
 
 
 
 

@RequestMapping(value = "manager", method =RequestMethod.GET) public @ResponseBody ModelAndView queryManager(Model model , @RequestParam(defaultValue = "0")int page2 , @RequestParam(defaultValue = "9")int pageSize2 , @RequestParam(required = false, defaultValue = "")String dealerId , String macAddress){ FastJsonJsonView view = new FastJsonJsonView(); if(macAddService.checkMacAddress(macAddress, "E")==true){ String uploadDir = this.localUploadTools.getPreviewDir() + "/dealerUpload"; PaginationSupport managerVOPS = dealerService.queryManager(dealerId, page2, pageSize2); view.addStaticAttribute("page2", page2); view.addStaticAttribute("uploadDir", uploadDir); view.addStaticAttribute("managerList", managerVOPS.getObject()); view.addStaticAttribute("stor_no2", managerVOPS.getTotalCount()); view.addStaticAttribute("pageCount2", managerVOPS.getPageCount()); } return new ModelAndView(view); }

/** * ajax分页 */ $(function(){ $(".modal-body").find(".pagination").on("click","li",function(){ var totalPage=$(".modal-body").find(".pagination").find(".lilength").length; var pageNo=$(this).find("a").text(); var beforePage=""; //获取之前选中的值 $(".modal-body").find(".pagination").find("li").each(function(){ if($(this).hasClass("active")){ beforePage=$(this).find("a").text(); } }); //alert(beforePage); if($(this).find("a").text()=="首页"){ removeClass(); $(".modal-body").find(".pagination").find("li").each(function(){ if($(this).find("a").text()=="1"){ $(this).addClass("active"); } getPlanFy("1"); }); }else if($(this).find("a").text()=="上页"){ if(beforePage==1){ showMessage("已经是第一页了!") }else{ var dqy=parseInt(beforePage)-1; $(".modal-body").find(".pagination").find("li").each(function(){ if($(this).find("a").text()==dqy.toString()){ $(this).addClass("active"); }else{ $(this).removeClass("active"); } }); getPlanFy(dqy); } }else if($(this).find("a").text()=="下页"){ if(beforePage==totalPage){ showMessage("已经是最后一页了!") }else{ var dqy=parseInt(beforePage)+1; $(".modal-body").find(".pagination").find("li").each(function(){ if($(this).find("a").text()==dqy.toString()){ $(this).addClass("active"); }else{ $(this).removeClass("active"); } }); getPlanFy(dqy); } }else if($(this).find("a").text()=="末页"){ removeClass(); $(".modal-body").find(".pagination").find("li").each(function(){ if($(this).find("a").text()==totalPage){ $(this).addClass("active"); } }); getPlanFy(totalPage); }else{ removeClass(); $(this).addClass("active"); getPlanFy(pageNo); } }); // $(".table").find("tbody").on("click",".showMsgDetail",function(){ // var msg=$(this).find("a").attr("name"); // showMagDetail(msg); // }); $(".addbutton").click(function(){ $("#savePlanmodal").removeAttr("name"); $("#planIdsUpdate").val(""); }); }); /** * 弹窗 */ function showMessage(content){ $.alert({ title: '提示', content: content,//支持html icon: 'fa fa-rocket', animation: 'zoom', closeAnimation: 'zoom', buttons: { okay: { text: '确定', btnClass: 'btn-primary' } } }); } /** * 移除css */ function removeClass(){ $(".modal-body").find(".pagination").find("li").each(function(){ $(this).removeClass("active"); }); } function getPlanFy(pageNo){ var pageSize=10; $.post(""+otherPath+"/fault-studio/getInpectPlanList.action", {"pageNo":pageNo,"pageSize":pageSize},function(data){ $("#inspectionPlan").find(".modal-body").find("table").find("tbody").html(""); $("#inspectionPlan").find(".modal-body").find(".pagination").html(""); var appendHtml=""; if(data.items!=null && data.items.length>0){ $.each(data.items,function(i,item){ var number=parseInt(i)+1; appendHtml+="" + ""+number+"" + ""+item[1]+"" + ""+item[2]+""+ ""+item[3]+""+ "修改 删除" "" }); $("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml); var paginHtml=""; if(isNotTirmpagin(data.totalPage) && data.totalPage>0){ paginHtml+="
首页
" + "
上页
"; for(var j=0;j"; }else{ paginHtml+="
"+page+"
"; } } paginHtml+="
下页
" + "
末页
"; $("#inspectionPlan").find(".modal-body").find(".pagination").append(paginHtml); } } }); } function updatePlan(obj){ var planId=obj.name; $.post(""+otherPath+"/fault-studio/getPlanById.action",{"id":planId},function(data){ if(data.result=="success"){ $(".addbutton").click(); var item=data.items; $("#planName").val(item.name); $("#planTitle").val(item.inspectTitle); $("#showTime").val(item.inspectTime); var module_name=item.module_name; var nameArray=module_name.split("&"); var moudleIdArray=item.inspectContent.split("&"); var nameHtml=""; if(nameArray!=null && nameArray.length>0){ for(var i=0;i"+nameArray[i]+""; } } } $(".inspectContent").append(nameHtml); var inspectTimeArray=item.inspectTime.split("&"); var timeHtml=""; if(inspectTimeArray!=null && inspectTimeArray.length>0){ for(var j=0;j"; } } } $(".inspectionChooseTime").append(timeHtml); $("#savePlanmodal").attr("name","update"); $("#planIdsUpdate").val(planId); } }); } function delPlan(obj){ var planId=obj.lang; sureConfirm("提示","确定删除吗?",planId); } function showMagDetail(msg){ $.alert({ title: '提示', content: msg,//支持html icon: 'fa fa-rocket', animation: 'zoom', closeAnimation: 'zoom', buttons: { okay: { text: '确定', btnClass: 'btn-primary' } } }); } function sureConfirm(tip,msg,planId){ $.confirm({ title: tip, content: msg, icon: 'fa fa-rocket', animation: 'zoom', closeAnimation: 'zoom', buttons: { confirm: { text: '确定', btnClass: 'btn-primary', action:function(){ $.post(""+otherPath+"/fault-studio/delInspectPlan.action",{"id":planId},function(data){ if(data.items=="success"){ showMagDetail("删除成功"); getPlanFy("1"); }else{ showMagDetail(data.msg); } }); } }, cancle: { text: '取消', action:function(){ return false; } } }, }); } function isNotTirmpagin(obj){ if(obj!=null && obj!='' && obj!=undefined){ return true; }else{ return false; } }