前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AJAX +SpringMVC 实现bootstrap模态框的分页查询

AJAX +SpringMVC 实现bootstrap模态框的分页查询

作者头像
week
发布2018-08-27 10:09:22
1.3K0
发布2018-08-27 10:09:22
举报
文章被收录于专栏:用户画像用户画像

一 、效果图

二、JS

代码语言:javascript
复制
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>

三、模态框

代码语言:javascript
复制
<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

代码语言:javascript
复制
@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);  
	}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年11月05日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档