您的位置：首页 > Web前端 > JQuery

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

2014-05-24 13:00 381 查看

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

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

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

此处又用到了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);" onclick="prePage();">上一页</a><pre name="code" class="html"><a href="javascript:void(0);" onclick="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\" onclick=\"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\" onclick=\"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;
}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航