[JSP 网站开发] 页面条目分页显示（struts2，jQuery）

最新推荐文章于 2018-07-25 21:27:22 发布

gopain

最新推荐文章于 2018-07-25 21:27:22 发布

阅读量1.3k

点赞数

分类专栏：课程地图-jsp网站文章标签： json数组 jquery 分页 struts2 jsp

本文链接：https://blog.csdn.net/gopain/article/details/26823123

版权

课程地图-jsp网站专栏收录该内容

7 篇文章 0 订阅

订阅专栏

分页显示数据，也是很多环节都需要的功能。

这里我分享一个个人案例，方法有很多，但是都大同小异。

我要实现的功能是在用户点击上一页／下一页的时候页面不刷新，局部不刷新，完成数据的重新填入。

此处又用到了jQuery，因为他方便。

在页面前端(<html></html>)中定义一个可获取区域：

<div id="topic_items">

</pre><pre code_snippet_id="361230" snippet_file_name="blog_20140524_3_813484" name="code" class="html"></div>

<a href="javascript:void(0);" οnclick="prePage();">上一页</a><pre name="code" class="html"><a href="javascript:void(0);" οnclick="nextPage();">下一页</a>

对于这个节点，宽高样式什么的请自己定义。

脚本：

function nextPage() {
	jQuery.post('forum_next',{},
		function(data) {
			var items_new = "";
			if(data == null){
				return;
			}
			$(data).each(
				function() {
					var item = "<a href=\"javascript:;\" class=\"item\" οnclick=\"submitForm('forum_Topic','topic.id','"
							+ this.id
							+ "');\">"
							+ "<div style=\"float:left;width:176;\">"
							+ this.title
							+ "</div>"
							+ "<div style=\"float:right;width:200;text-align:right;\">"
							+ this.time
							+ "</div>"
							+ "<hr  size=1 style=\"color:#3399FF\"/>"
							+ "</a>";
					items_new += item;
				});
			$("#topic_items").html(items_new);
			var pagenow = $("#pagenow").text();
			$("#pagenow").html(Number(pagenow)+1);
		}, "json");
}

function prePage() {
	jQuery.post('forum_pre',{},
			function(data) {
				var items_new = "";
				if(data == null){
					return;
				}
				$(data).each(
					function() {
						var item = "<a href=\"javascript:;\" class=\"item\" οnclick=\"submitForm('forum_Topic','topic.id','"
								+ this.id
								+ "');\">"
								+ "<div style=\"float:left;width:176;\">"
								+ this.title
								+ "</div>"
								+ "<div style=\"float:right;width:200;text-align:right;\">"
								+ this.time
								+ "</div>"
								+ "<hr  size=1 style=\"color:#3399FF\"/>"
								+ "</a>";
						items_new += item;
					});
				$("#topic_items").html(items_new);
				var pagenow = $("#pagenow").text();
				$("#pagenow").html(Number(pagenow)-1);
			}, "json");
}

对于翻页数据用js脚本来实现，就需要解析json数组。这里的

$(data).each(function(){})

就是解析json数组。

具体信息就不在此解释了。

以下是服务器产生json数组并返回。

public String toForum_next(){
		
		HttpServletRequest request = ServletActionContext.getRequest();
		pagenow = (Integer) request.getSession().getAttribute("PAGENOW");
		pageall = (Integer) request.getSession().getAttribute("PAGEALL");
		if(pagenow == pageall){
			return null;
		}
		pagenow += 1;
		topics_all = topicDao.getAll(2,pagenow);
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
		String res = "[";
		boolean flag = true;
		for (Topic topic : topics_all) {
			if(flag){
				res += "{\"id\":\""+topic.getId()+"\",\"title\":\""+topic.getTitle()+"\",\"time\":\""+topic.getPublishdate()+"\"}";
				flag = false;
			}
			else
				res += ",{\"id\":\""+topic.getId()+"\",\"title\":\""+topic.getTitle()+"\",\"time\":\""+topic.getPublishdate()+"\"}";
		}
		res += "]";
		request.getSession().setAttribute("PAGENOW", pagenow);
//		request.getSession().setAttribute("PAGEALL", pageall);
		try {
			response.getWriter().write(res);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	public String toForum_pre(){
		
		HttpServletRequest request = ServletActionContext.getRequest();
		pagenow = (Integer) request.getSession().getAttribute("PAGENOW");
		pageall = (Integer) request.getSession().getAttribute("PAGEALL");
		if(pagenow <= 1){
			return null;
		}
		pagenow -= 1;
		topics_all = topicDao.getAll(2,pagenow);
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
		String res = "[";
		boolean flag = true;
		for (Topic topic : topics_all) {
			if(flag){
				res += "{\"id\":\""+topic.getId()+"\",\"title\":\""+topic.getTitle()+"\",\"time\":\""+topic.getPublishdate()+"\"}";
				flag = false;
			}
			else
				res += ",{\"id\":\""+topic.getId()+"\",\"title\":\""+topic.getTitle()+"\",\"time\":\""+topic.getPublishdate()+"\"}";
		}
		res += "]";
		request.getSession().setAttribute("PAGENOW", pagenow);
		try {
			response.getWriter().write(res);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

具体的信息不想解释，相信都看得懂。