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);
}
});
}