一 、效果图

二、JS

@H_502_7@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+="<div class='col-xs-4 demo1_Box'>"; rs+="<img width='200px' height='130px' src='"; rs+=path; rs+="'>"; rs=rs+"<p>"+name+"</p></div> "; } $('#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>
三、模态框

<div style="display:none;" class="modal fade bs-example-modal-lg in" id="personAddModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
	<div class="modal-dialog modal-lg">
		<div class="modal-content" id="personAddModelContent">
			<div 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>
			</div>

		<div class="modal-body">
			<div class="row">
			   <div class="col-xs-12" id="managerList">

			   </div>
			</div>
		</div>
		<div class="modal-footer" id="pagination">
		     
		</div>
	</div>
</div>

四、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);  
	}