基于Jquery+Ajax+Json實(shí)現(xiàn)分頁(yè)顯示附效果圖
1.后臺(tái)action產(chǎn)生json數(shù)據(jù)。
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<blackList.size();i++) {
LBlack blackInfo = (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(",")); // 刪去最后一個(gè)逗號(hào)
sb.append("]}");
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/plain");
response.getWriter().print(sb);
2.struts.xml相關(guān)配置
<action name="blackList" class="blackAction" method="blackList"> <!--plaintext用于顯示頁(yè)面原始代碼的結(jié)果類(lèi)型--> <result type="plainText"> <param name="charSet">UTF-8</param> <param name="location">/WEB-INF/jsp/manage/black.jsp</param> </result> </action>
3.js獲取json數(shù)據(jù)分頁(yè)顯示
function getJSONData(pn) {
// alert(pn);
$.getJSON("blackList.ce", function(data) {
var totalCount = data.totalCount; // 總記錄數(shù)
var pageSize = 10; // 每頁(yè)顯示幾條記錄
var pageTotal = Math.ceil(totalCount / pageSize); // 總頁(yè)數(shù)
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('<li class="li-tag"></li>');
}
var dataRoot = data.jsonRoot;
if (pageTotal == 1) { // 當(dāng)只有一頁(yè)時(shí)
for (var j = 0; j < totalCount; j++) {
$(".li-tag").eq(j).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")
.append("<span class='col2'>" + parseInt(j + 1)
+ "</span>").append("<span class='col3'>" + dataRoot[j].mobile
+ "</span>").append("<span class='col4'>" + dataRoot[j].province
+ "</span>").append("<span class='col5'>" + dataRoot[j].gateway
+ "</span>").append("<span class='col6'>" + dataRoot[j].insertTime
+ "</span>").append("<span class='col7'>" + dataRoot[j].remark
+ "</span>")
}
} else {
for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) {
if( j == totalCount){
break; // 當(dāng)遍歷到最后一條記錄時(shí),跳出循環(huán)
}
$(".li-tag").eq(k).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")
.append("<span class='col2'>" + parseInt(j + 1)
+ "</span>").append("<span class='col3'>" + dataRoot[j].mobile
+ "</span>").append("<span class='col4'>" + dataRoot[j].province
+ "</span>").append("<span class='col5'>" + dataRoot[j].gateway
+ "</span>").append("<span class='col6'>" + dataRoot[j].insertTime
+ "</span>").append("<span class='col7'>" + dataRoot[j].remark
+ "</span>")
}
}
$(".page-count").text(pageTotal);
})
}
function getPage() {
$.getJSON("blackList.ce", function(data) {
pn = 1;
var totalCount = data.totalCount; // 總記錄數(shù)
var pageSize = 10; // 每頁(yè)顯示幾條記錄
var pageTotal = Math.ceil(totalCount / pageSize); // 總頁(yè)數(shù)
$("#next").click(function() {
if (pn == pageTotal) {
alert("后面沒(méi)有了");
pn = pageTotal;
} else {
pn++;
gotoPage(pn);
}
});
$("#prev").click(function() {
if (pn == 1) {
alert("前面沒(méi)有了");
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("您輸入的頁(yè)碼有誤!");
$(".page-num").val('').focus();
}
})
$("#firstPage").trigger("click");
})
}
function gotoPage(pn) {
// alert(pn);
$(".current-page").text(pn);
getJSONData(pn)
}
$(function() {
getPage();
})

- 使用bootstrap-paginator.js 分頁(yè)來(lái)進(jìn)行ajax 異步分頁(yè)請(qǐng)求示例
- Javascript vue.js表格分頁(yè),ajax異步加載數(shù)據(jù)
- vue.js 表格分頁(yè)ajax 異步加載數(shù)據(jù)
- js實(shí)現(xiàn)ajax分頁(yè)完整實(shí)例
- 使用Jquery+Ajax+Json如何實(shí)現(xiàn)分頁(yè)顯示附JAVA+JQuery實(shí)現(xiàn)異步分頁(yè)
- Jquery+Ajax+Json+存儲(chǔ)過(guò)程實(shí)現(xiàn)高效分頁(yè)
- asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無(wú)刷新分頁(yè)的實(shí)例代碼
- javascript ajax 仿百度分頁(yè)函數(shù)
- 基于Jquery+Ajax+Json的高效分頁(yè)實(shí)現(xiàn)代碼
- 原生js+ajax分頁(yè)組件
相關(guān)文章
獲得所有表單值的JQuery實(shí)現(xiàn)代碼[IE暫不支持]
通過(guò)jquery獲取所有表單值,一般都是后臺(tái)語(yǔ)言處理的,這里通過(guò)jquery獲取,確實(shí)不錯(cuò)的想法2012-05-05
jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)
下面想就為大家?guī)?lái)一篇jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05
跟著JQuery API學(xué)Jquery 之二 屬性
在選擇器的API學(xué)習(xí)中,走馬觀花的把選擇器過(guò)了一遍,但是選擇歸選擇,選擇出來(lái)了沒(méi)干什么事,也沒(méi)有什么用嘛2010-04-04
jQuery解析XML與傳統(tǒng)JavaScript方法的差別實(shí)例分析
這篇文章主要介紹了jQuery解析XML與傳統(tǒng)JavaScript方法的差別,實(shí)例分析了jQuery與javascript解析XML文件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
翻頁(yè)插件有很多種,做出來(lái)的效果都非常棒,這篇文章主要介紹了jQuery 翻頁(yè)組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路,非常不錯(cuò),需要的朋友可以參考下2016-08-08
基于jQuery實(shí)現(xiàn)淡入淡出效果輪播圖
這篇文章主要為大家詳細(xì)介紹了基于jQuery淡入淡出效果輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
jQuery學(xué)習(xí)筆記之jQuery.extend(),jQuery.fn.extend()分析
給jQuery做過(guò)擴(kuò)展或者制作過(guò)jQuery插件的人這兩個(gè)方法東西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 這兩個(gè)屬性都是用于合并兩個(gè)或多個(gè)對(duì)象的屬性到target對(duì)象.2014-06-06

