基于Jquery+Ajax+Json实现分页显示附效果图

1.后台action产生json数据。

ListblackList=blackService.getBlackInfoList(mobileNum,gatewayid,startDate,endDate);
inttotalRows=blackList.size();
StringBuffersb=newStringBuffer();
sb.append("{\"totalCount\":\""+totalRows+"\",");
sb.append("\"jsonRoot\":[");
for(inti=0;i<blackList.size();i++){
LBlackblackInfo=(LBlack)blackList.get(i);
sb.append("{\"id\":\""+blackInfo.getId());
sb.append("\",");
sb.append("\"mobile\":\""+blackInfo.getMobile());
sb.append("\",");
sb.append("\"province\":\""+blackInfo.getProvince());
sb.append("\",");
sb.append("\"gateway\":\""+blackInfo.getGateway());
sb.append("\",");
sb.append("\"insertTime\":\""+blackInfo.getInsertTime());
sb.append("\",");
sb.append("\"remark\":\""+blackInfo.getRemark());
sb.append("\"");
sb.append("},");
}
sb.deleteCharAt(sb.lastIndexOf(","));//删去最后一个逗号
sb.append("]}");

HttpServletResponseresponse=ServletActionContext.getResponse();
response.setContentType("text/plain");
response.getWriter().print(sb);

2.struts.xml相关配置

<actionname="blackList"class="blackAction"method="blackList">
<!--plaintext用于显示页面原始代码的结果类型-->
<resulttype="plainText">
<paramname="charSet">UTF-8</param>
<paramname="location">/WEB-INF/jsp/manage/black.jsp</param>
</result>
</action>

3.js获取json数据分页显示

functiongetJSONData(pn){
//alert(pn);
$.getJSON("blackList.ce",function(data){
vartotalCount=data.totalCount;//总记录数
varpageSize=10;//每页显示几条记录
varpageTotal=Math.ceil(totalCount/pageSize);//总页数
varstartPage=pageSize*(pn-1);
varendPage=startPage+pageSize-1;
var$ul=$("#json-list");
$ul.empty();
for(vari=0;i<pageSize;i++){
$ul.append("<liclass="li-tag"></li>");
}
vardataRoot=data.jsonRoot;
if(pageTotal==1){//当只有一页时
for(varj=0;j<totalCount;j++){
$(".li-tag").eq(j).append("<spanclass="col1"><inputtype="checkbox"value=""+parseInt(j+1)+""/></span>")
.append("<spanclass="col2">"+parseInt(j+1)
+"</span>").append("<spanclass="col3">"+dataRoot[j].mobile
+"</span>").append("<spanclass="col4">"+dataRoot[j].province
+"</span>").append("<spanclass="col5">"+dataRoot[j].gateway
+"</span>").append("<spanclass="col6">"+dataRoot[j].insertTime
+"</span>").append("<spanclass="col7">"+dataRoot[j].remark
+"</span>")
}
}else{
for(varj=startPage,k=0;j<endPage,k<pageSize;j++,k++){
if(j==totalCount){
break;//当遍历到最后一条记录时，跳出循环
}
$(".li-tag").eq(k).append("<spanclass="col1"><inputtype="checkbox"value=""+parseInt(j+1)+""/></span>")
.append("<spanclass="col2">"+parseInt(j+1)
+"</span>").append("<spanclass="col3">"+dataRoot[j].mobile
+"</span>").append("<spanclass="col4">"+dataRoot[j].province
+"</span>").append("<spanclass="col5">"+dataRoot[j].gateway
+"</span>").append("<spanclass="col6">"+dataRoot[j].insertTime
+"</span>").append("<spanclass="col7">"+dataRoot[j].remark
+"</span>")
}
}
$(".page-count").text(pageTotal);
})
}
functiongetPage(){
$.getJSON("blackList.ce",function(data){
pn=1;
vartotalCount=data.totalCount;//总记录数
varpageSize=10;//每页显示几条记录
varpageTotal=Math.ceil(totalCount/pageSize);//总页数
$("#next").click(function(){
if(pn==pageTotal){
alert("后面没有了");
pn=pageTotal;
}else{
pn++;
gotoPage(pn);
}
});
$("#prev").click(function(){
if(pn==1){
alert("前面没有了");
pn=1;
}else{
pn--;
gotoPage(pn);
}
})
$("#firstPage").click(function(){
pn=1;
gotoPage(pn);
});
$("#lastPage").click(function(){
pn=pageTotal;
gotoPage(pn);
});
$("#page-jump").click(function(){
if($(".page-num").val()<=pageTotal&&$(".page-num").val()!=""){
pn=$(".page-num").val();
gotoPage(pn);
}else{
alert("您输入的页码有误！");
$(".page-num").val("").focus();
}
})
$("#firstPage").trigger("click");

})
}
functiongotoPage(pn){
//alert(pn);
$(".current-page").text(pn);
getJSONData(pn)
}

$(function(){
getPage();
})