分頁顯示數據，也是很多環節都需要的功能。
這裏我分享一個個人案例，方法有很多，但是都大同小異。
我要實現的功能是在用戶點擊上一頁／下一頁的時候頁面不刷新，局部不刷新，完成數據的重新填入。
此處又用到了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;
}具體的信息不想解釋，相信都看得懂。