一 、效果图

二、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+="<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>

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