AJAX + SpringMVC는 부트스트랩 모달 상자의 페이징 쿼리 기능을 구현합니다.

이 글에서는 부트스트랩 모달 박스의 페이징 쿼리 기능을 구현하기 위한 AJAX + SpringMVC를 주로 소개하고 있으며, 모달 박스 Ajax 페이징 예제 코드 공유도 매우 훌륭하여 도움이 필요한 친구들이 참고할 수 있습니다.

1. 렌더링

2. 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=&#39;col-xs-4 demo1_box&#39;>"; 
    rs+="<img width=&#39;200px&#39; height=&#39;130px&#39; src=&#39;"; 
    rs+=path; 
    rs+="&#39;>"; 
    rs=rs+"<p>"+name+"</p></p> "; 
   } 
   $(&#39;#managerList&#39;).empty(); 
   $(&#39;#managerList&#39;).append(rs); 
   var page2=data.page2; 
   var stor_no2=data.stor_no2; 
   var pageCount2=data.pageCount2; 
   var pagination = ""; 
   pagination+="<ul class=&#39;pagination pager_cus&#39;>"; 
   pagination=pagination+"<li><a>第 "+(page2 + 1); 
   pagination=pagination+" 页/共 "+pageCount2+" 页</a></li>"; 
   pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
   pagination += dealerId; 
   pagination += "\","; 
   pagination += 0 + ");&#39;>« 首页</a></li>"; 
   if(page2>0){ 
    pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
    pagination += dealerId; 
    pagination += "\","; 
    pagination += (page2 - 1) + ");&#39;>« 上一页</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=&#39;active&#39;><a href=&#39;javascript:getManagerList(\""; 
      pagination += dealerId; 
      pagination += "\","; 
      pagination += j + ");&#39;>"+(j+1)+"</a></li>"; 
     }else{ 
      pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
      pagination += dealerId; 
      pagination += "\","; 
      pagination += j + ");&#39;>"+(j+1)+"</a></li>"; 
     } 
    } 
   } 
   if(page2<pageCount2-1){ 
    pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
    pagination += dealerId; 
    pagination += "\","; 
    pagination += (page2 + 1) + ");&#39;>下一页 »</a></li>"; 
   } 
   pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
   pagination += dealerId; 
   pagination += "\","; 
   pagination += (pageCount2 - 1) + ");&#39;>« 尾页</a></li>"; 
   $(&#39;#pagination&#39;).empty(); 
   $(&#39;#pagination&#39;).append(pagination); 
   $(&#39;#personAddModel&#39;).modal(&#39;show&#39;); 
  } 
  } 
 ); 
} 
</script>

3.

<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>

4. 컨트롤러

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

좋아요,

다음은 부트스트랩 모달 상자 ajax 페이징 예제 코드

를 먼저 소개합니다.

렌더링:

추가 정보:

르레에

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

드롭다운 목록에 데이터를 동적으로 추가하기 위해 Ajax를 구현하는 방법

도메인 간 액세스를 달성하기 위해 Access-Control-Allow-Origin 설정

Ajax를 구현하여 등록 및 선택 아바타 업로드 기능

위 내용은 AJAX + SpringMVC는 부트스트랩 모달 상자의 페이징 쿼리 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!