이번에는 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='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>
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 중국어 웹사이트에서 다른 관련 기사를 주목하세요!
추천 자료:
Ajax 드롭다운 목록 데이터 추가Ajax 도메인 간 액세스 중 쿠키 손실 문제를 해결하는 방법
위 내용은 Ajax를 사용하여 부트스트랩 모달 상자의 페이징 쿼리 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!