AJAX 和SpringMVC 實現bootstrap模態框的分頁查詢功能詳解

本文主要介紹了AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能，以及模態框 ajax分頁執行個體代碼分享，非常不錯，具有參考借鑒價值，需要的朋友可以參考下，希望能協助到大家。

一 、

二、JS

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<managerList.length;i++)    {     var name=managerList[i].personName;     var picPath=managerList[i].picPath;     if(picPath==null){      var path="${ctxPath}/resources/assets/imgs/no_pic.png";     }else{      var path="${ctxPath}"+uploadDir+picPath;     }     rs+="<p class='col-xs-4 demo1_box'>";     rs+="<img width='200px' height='130px' src='";     rs+=path;     rs+="'>";     rs=rs+"<p>"+name+"</p></p> ";    }    $('#managerList').empty();    $('#managerList').append(rs);    var page2=data.page2;    var stor_no2=data.stor_no2;    var pageCount2=data.pageCount2;    var pagination = "";    pagination+="<ul class='pagination pager_cus'>";    pagination=pagination+"<li><a>第 "+(page2 + 1);    pagination=pagination+" 頁/共 "+pageCount2+" 頁</a></li>";    pagination += "<li><a href='javascript:getManagerList(\"";    pagination += dealerId;    pagination += "\",";    pagination += 0 + ");'>« 首頁</a></li>";    if(page2>0){     pagination += "<li><a href='javascript:getManagerList(\"";     pagination += dealerId;     pagination += "\",";     pagination += (page2 - 1) + ");'>« 上一頁</a></li>";    }    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<pageCount2){      if(page2==j){       pagination += "<li class='active'><a href='javascript:getManagerList(\"";       pagination += dealerId;       pagination += "\",";       pagination += j + ");'>"+(j+1)+"</a></li>";      }else{       pagination += "<li><a href='javascript:getManagerList(\"";       pagination += dealerId;       pagination += "\",";       pagination += j + ");'>"+(j+1)+"</a></li>";      }     }    }    if(page2<pageCount2-1){     pagination += "<li><a href='javascript:getManagerList(\"";     pagination += dealerId;     pagination += "\",";     pagination += (page2 + 1) + ");'>下一頁 »</a></li>";    }    pagination += "<li><a href='javascript:getManagerList(\"";    pagination += dealerId;    pagination += "\",";    pagination += (pageCount2 - 1) + ");'>« 尾頁</a></li>";    $('#pagination').empty();    $('#pagination').append(pagination);    $('#personAddModel').modal('show');   }   }  ); } </script>

三、模態框

<p style="display:none;" class="modal fade bs-example-modal-lg in" id="personAddModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">  <p class="modal-dialog modal-lg">   <p class="modal-content" id="personAddModelContent">    <p class="modal-header">     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>     <span class="modal-header-title" id="myModalLabel">經營人員</span>    </p>   <p class="modal-body">    <p class="row">     <p class="col-xs-12" id="managerList">     </p>    </p>   </p>   <p class="modal-footer" id="pagination">   </p>  </p> </p>

四、controller

@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<ManagePersonForTouchScreenVO> 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);  }

好了，下面給大家介紹了bootstrap模態框 ajax分頁執行個體代碼，先給大家展示下：

：

上乾貨：

/**  * 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+="<tr>" +     "<td align='center'>"+number+"</td>" +     "<td><a>"+item[1]+"</a></td>" +     "<td>"+item[2]+"</td>"+     "<td>"+item[3]+"</td>"+     "<td><a name='"+item[0]+"' onclick='updatePlan(this)'>修改</a> <a lang='"+item[0]+"' onclick='delPlan(this)'>刪除</a></td>"     "</tr>"   });   $("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml);   var paginHtml="";   if(isNotTirmpagin(data.totalPage) && data.totalPage>0){    paginHtml+="<li><a>首頁</a></li>" +     "<li><a>上頁</a></li>";    for(var j=0;j<data.totalPage;j++){    var page=parseInt(j)+1;    if(page==pageNo){     paginHtml+="<li class='lilength active'><a>"+page+"</a></li>";    }else{     paginHtml+="<li class='lilength'><a>"+page+"</a></li>";    }    }    paginHtml+="<li><a>下頁</a></li>" +     "<li><a>末頁</a></li>";    $("#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.length;i++){    if(isNotTirmpagin(nameArray[i])){    nameHtml+="<li id='"+moudleIdArray[i]+"'>"+nameArray[i]+"</li>";    }   }   }   $(".inspectContent").append(nameHtml);   var inspectTimeArray=item.inspectTime.split("&");   var timeHtml="";   if(inspectTimeArray!=null && inspectTimeArray.length>0){   for(var j=0;j<inspectTimeArray.length;j++){    if(isNotTirmpagin(inspectTimeArray[j])){    timeHtml+="<li>"+inspectTimeArray[j]+"</li>";    }   }   }   $(".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;  } }

大家學會了嗎？趕緊動手嘗試一下吧。

相關推薦:

ajax分頁查詢詳解

執行個體詳解ajax實現分頁查詢功能

執行個體詳解kkpager 實現ajax分頁查詢功能