Ajax提交分頁請求，實現異步刷新效果(1)

一、使用JsonArray傳遞

java代碼

@RequestMapping(value="/myphotopage")
public  HttpEntity<JSONArray> myphoto2(int pageNum,HttpSession session,HttpServletResponse resp) throws Exception{
UserInfo user=(UserInfo) session.getAttribute("user");
JSONObject json=new JSONObject();
JSONArray jsonArray=new JSONArray();
if(user!=null){
// 定義的總記錄數
int dataCount = 0;
// 定義當前頁
//  pageNum = 1;
// 定義總頁數
int pageCount = 0;
// 定義每頁顯示條數
int pageSize = 6;
// 開始索引
int startIndex = 0;
dataCount=photoService.countPhotoByUserid(user.getUserid());
if(dataCount%pageSize == 0){
pageCount = dataCount/pageSize;
}else {
pageCount = dataCount/pageSize + 1;
}
if(pageNum!=0){
startIndex = (pageNum-1)*pageSize;
}
List<Photo> photos=photoService.getPhotoByPageNumAndUserid(user.getUserid(), startIndex);
json.put("dataCount", dataCount);
json.put("pageNum", pageNum);
json.put("pageCount", pageCount);
jsonArray.add(photos);
jsonArray.add(json);
}else{
resp.sendRedirect("templates/login.jsp");
}
HttpEntity<JSONArray> httpEntity=new HttpEntity<JSONArray>(jsonArray);
return httpEntity;
}

jsp代碼

function showpage(pageNum) {
$.ajax({
url : "/shoots/myphotopage.do?pageNum=" + pageNum,
type : "get",
dataType : "json",
success : function(data) {
var objs = eval(data);
//取出回送的數據
//list代表後臺發送回來的集合。
//info中封裝了一些其他信息。
var list = objs[0];
var info = objs[1];
var page = "";
var result = "";
result = "<table class='table'><thead>";
result += "<tr><th>圖片編號</th><th>圖片類型</th><th>上傳時間</th><th>收藏數量</th><th style='width: 26px;'></th></tr>";
result += " </thead><tbody>";
//遍歷集合 index爲索引，element爲對象
$.each(list,function(index, element) {
//拼接字符串
result += "<tr>";
result += "<td>"
+ element.photoid
+ "</td>";
result += "<td>"
+ element.ptype.ptcon
+ "</td>";
result += "<td>"
+ element.phototime
+ "</td>";
result += "<td>"
+ element.likenum
+ "</td>";
result += "<td><button aria-hidden='true' data-toggle='modal' class='icon-pencil'";
result += "data-target='#showinfo'  data-photoid='"
+ element.photoid
+ "'  data-path='"
+ element.photoname
+ "'";
result += "data-remake='"
+ element.photoremake
+ "'  onclick='iii()'></button> </td>";
result += "</tr>";
});
result += "</table>";
if (info.pageNum == 1) {
page += "首頁 上頁";
} else {
var up = info.pageNum - 1;
page += "<input type='button' name='first' value='首頁' onclick='showpage(1)' />  <input type='button' name='up' value='上頁' onclick='showpage("
+ up + ")' />"
}
if (info.pageNum == info.pageCount
|| info.pageCount == 0) {
page += "下頁 尾頁";
}
if (info.pageNum < info.pageCount) {
var nex = info.pageNum + 1;
page += "<input type='button' name='first' value='下頁 ' onclick='showpage("
+ nex
+ ")' /><input type='button' name='first' value='尾頁 ' onclick='showpage("
+ info.pageCount + ")' /> "
}
page += "共 " + info.dataCount + " 條記錄   第"
+ info.pageNum + "頁/共" + info.pageCount
+ "頁";
$("#page").html(page);
$("#cont").html(result);
}
});
}