当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Jquery+Ajax+Json实现分页显示附效果

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

2019年04月06日  | 移动技术网IT编程  | 我要评论

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<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(",")); // 删去最后一个逗号 
sb.append("]}"); 

httpservletresponse response = servletactioncontext.getresponse(); 
response.setcontenttype("text/plain"); 
response.getwriter().print(sb);

2.struts.xml相关配置

<action name="blacklist" class="blackaction" method="blacklist"> 
<!--plaintext用于显示页面原始代码的结果类型--> 
<result type="plaintext"> 
<param name="charset">utf-8</param> 
<param name="location">/web-inf/jsp/manage/black.jsp</param> 
</result> 
</action>

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('<li class="li-tag"></li>'); 
} 
var dataroot = data.jsonroot; 
if (pagetotal == 1) { // 当只有一页时 
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; // 当遍历到最后一条记录时，跳出循环 
} 
$(".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; // 总记录数 
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(); 
})

\

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网