집 > 기사 > 웹 프론트엔드 > Ajax를 사용하여 부트스트랩 모달 상자의 페이징 쿼리 기능을 구현하는 방법

Ajax를 사용하여 부트스트랩 모달 상자의 페이징 쿼리 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-04-02 16:15:393971검색

이번에는 bootstrap모달 박스 페이징 쿼리 기능을 구현하기 위해 ajax를 구현하는 방법을 보여 드리겠습니다. 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> "; 
   } 
   $('#managerList').empty(); 
   $('#managerList').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>"; 
   $('#pagination').empty(); 
   $('#pagination').append(pagination); 
   $('#personAddModel').modal('show'); 
  } 
  } 
 ); 
} 
</script>

3. 4, 컨트롤러

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

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

를 소개합니다. 먼저 렌더링을 보여드리겠습니다. 렌더링:

추가 정보:

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

이 기사 당신은 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에서 다른 관련 기사를 주목하세요!