springMVC实现ajax分页

服务端代码

	/**
	 * 付费问题详情
	 * 
	 * @return
	 */
	@RequestMapping(value = "/questionPay/{id}.html", produces = "text/html;charset=UTF-8")
	public String questionPay(@PathVariable Long id, ModelMap model, HttpServletRequest request) {
		try {
			QidaQuestion question = qidaQuestionService.get(id);
			question.setPageViews((question.getPageViews() == null ? 0 : question.getPageViews()) + 1);
			qidaQuestionService.save(question);
			model.put("question", question);
			model.put("nowDate", new Date());
			FuUser fuUser = (FuUser) request.getSession().getAttribute("fuUser");
			model.put("fuUser", fuUser);
			if (fuUser != null) {
				// 用户关注
				List<QidaConcern> concernList = qidaConcernService.findByMySelf(fuUser.getId());
				model.put("concernList", concernList);
				// 用户收藏
				List<QidaCollection> collectionList = qidaCollectionService.findByMySelf(fuUser.getId());
				model.put("collectionList", collectionList);
				// 是否关注
				int res = qidaConcernService.findIsWatch(fuUser, question.getFuUser());
				model.put("res", res);
				// 是否收藏
				QidaCollection collection = qidaCollectionService.findByQuestion(fuUser.getId(), id);
				if (collection == null) {
					model.put("isCollection", 0);
				} else {
					model.put("isCollection", 1);
				}
			}
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("qidaRank", "专家");
			Integer totalCount = fuUserService.getCount(map);
			model.put("totalCount", totalCount);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "qida/questionDetail/questionPay";
	}

	/**
	 * 分页查询专家列表
	 * 
	 * @return
	 */
	@RequestMapping(value = "/questionExpert.html", produces = "text/html;charset=UTF-8")
	@ResponseBody
	public String questionExpert(Integer pageNo, Integer pageSize, ModelMap model) {
		JSONObject json = new JSONObject();
		try {
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("qidaRank", "专家");
			List<FuUser> expertList = fuUserService.findList((pageNo - 1) * pageSize, pageSize, map);
			JSONArray array = new JSONArray();
			if (expertList != null && expertList.size() > 0) {
				for (FuUser user : expertList) {
					JSONObject obj = new JSONObject();
					obj.put("id", user.getId());
					obj.put("userAvatar", user.getUserAvatar() == null ? "../../images_qiDa/tx.png" : user.getUserAvatar());
					obj.put("nickName", user.getNickName() == null ? "佚名" : user.getNickName());
					array.add(obj);
				}
				json.put("array", array);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return json.toString();
	}

	/**
	 * 邀请专家解答付费问题
	 */
	@RequestMapping(value = "/InvitationAnswer/{expertId}/{questionId}.html", produces = "text/html;charset=UTF-8")
	@ResponseBody
	public String InvitationAnswer(@PathVariable Long expertId, @PathVariable Long questionId) {
		try {
			QidaQuestion question = qidaQuestionService.get(questionId);
			question.setAnswerUser(fuUserService.get(expertId));
			qidaQuestionService.save(question);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

前端代码

html代码

<div class="discussBtnBod">
	<c:if test="${fuUser.id==question.fuUser.id}">
	<a class="invite"><i class="inviteImg"></i>邀请专家<input class="inviteHid" type="hidden" value="0"/></a>
	</c:if>
</div>
<div class="zjList">
	<div class="zjInfo">您已邀请${empty question.answerUser?'':question.answerUser.nickName==null?'佚名':question.answerUser.nickName}</div>
	<ul class="zjList-ul">
	</ul>
	<nav class="fenye">
	<ul class="pager">
		<li><a href="javascript:void(0)" οnclick="lastPage()">上一页</a></li>
		<li><a href="javascript:void(0)" οnclick="nextPage()">下一页</a></li>
	</ul>
	</nav>
</div>

js代码

        var totalCount=${totalCount};
		var pageNo=1;
		var pageSize=4;
		var totalPage=(totalCount%pageSize==0)?totalCount/pageSize:totalCount/pageSize+1;
		searchExpert(pageNo,pageSize);
		
		//分页查询邀请的专家
		function searchExpert(pageNo,pageSize){
			$.post("${ctx}/web/qida/questionExpert.html",{pageNo:pageNo,pageSize:pageSize},function(data){
				var data=eval("("+data+")");
				$(".zjList-ul").find("li").remove(); 
				var length=data.array.length;
				var result = '';
				for(var i=0;i<length;i++){
					var arrText = [];
					arrText.push("<li><div class='tx'><a class='txImg'><img src='"+data.array[i].userAvatar+"' /></a></div>");
					arrText.push("<div class='zjList-infos'><div class='zjList-inf userNm grayCol'><span class='smalBlu'>"+array[i].nickName+"</span><br></div>");
					if(${question.answerUser==null}){
					      arrText.push("<a class='zjList-btn' οnclick='InvitationAnswer("+data.array[i].id+",${question.id})'>邀请回答</a>");
					}
					if(data.array[i].id==${question.answerUser==null?0:question.answerUser.id}){
                                arrText.push("<a class='zjList-btnac'>已邀请</a>");
                         }
					arrText.push("</div></li>");
					result +=  arrText.join('');
				}
				$(".zjList-ul").append(result);
			})
		}
		
		//上一页
		function lastPage(){
			pageNo -= 1;
			pageNo=pageNo>=0?pageNo:0;
			searchExpert(pageNo,pageSize);
		}
		
		//下一页
		function nextPage(){
			if(pageNo+1<=totalPage){
				pageNo += 1;
			}
			searchExpert(pageNo,pageSize);
		}
		
		//邀请专家解答
		function InvitationAnswer(expertId,questionId){
			$.post("${ctx}/web/qida/InvitationAnswer/"+expertId+"/"+questionId+".html",null,function(){
				layer.open({
	 			    content: "邀请成功！",
	 			    btn: ["确定"],
	 			    shadeClose: false,
	 			    yes: function(){
	 			        layer.closeAll();
	 			        location.href=location.href;
	 			    }
 				});
			})
		}

效果图