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

1.后台action产生json数据。

List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); 
int totalRows = blackList.size(); 
StringBuffer sb = new StringBuffer(); 
sb.append("{"totalCount":""+totalRows+"","); 
sb.append(""jsonRoot":["); 
for (int i=0;i

2.struts.xml相关配置



 
 
 
UTF-8 
/WEB-INF/jsp/manage/black.jsp 
 


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

function getJSonData(pn) { 
// alert(pn); 
$.getJSON("blackList.ce", function(data) { 
var totalCount = data.totalCount; // 总记录数 
var pageSize = 10; // 每页显示几条记录 
var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
var startPage = pageSize * (pn - 1); 
var endPage = startPage + pageSize - 1; 
var $ul = $("#json-list"); 
$ul.empty(); 
for (var i = 0; i < pageSize; i++) { 
$ul.append('
'); 
} 
var dataRoot = data.jsonRoot; 
if (pageTotal == 1) { // 当只有一页时 
for (var j = 0; j < totalCount; j++) { 
$(".li-tag").eq(j).append("") 
.append("" + parseInt(j + 1) 
+ "").append("" + dataRoot[j].mobile 
+ "").append("" + dataRoot[j].province 
+ "").append("" + dataRoot[j].gateway 
+ "").append("" + dataRoot[j].insertTime 
+ "").append("" + dataRoot[j].remark 
+ "") 
} 
} else { 
for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { 
if( j == totalCount){ 
break; // 当遍历到最后一条记录时，跳出循环 
} 
$(".li-tag").eq(k).append("") 
.append("" + parseInt(j + 1) 
+ "").append("" + dataRoot[j].mobile 
+ "").append("" + dataRoot[j].province 
+ "").append("" + dataRoot[j].gateway 
+ "").append("" + dataRoot[j].insertTime 
+ "").append("" + dataRoot[j].remark 
+ "") 
} 
} 
$(".page-count").text(pageTotal); 
}) 
} 
function getPage() { 
$.getJSON("blackList.ce", function(data) { 
pn = 1; 
var totalCount = data.totalCount; // 总记录数 
var pageSize = 10; // 每页显示几条记录 
var pageTotal = 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"); 

}) 
} 
function gotoPage(pn) { 
// alert(pn); 
$(".current-page").text(pn); 
getJSonData(pn) 
} 

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