Jquery+Ajax+Json实现分页显示附效果
程序员文章站
2022-06-13 11:39:03
1.后台action产生json数据。
list blacklist = blackservice.getblackinfolist(mobilenum, gateway...
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(); })
上一篇: ZBrush怎么让物体布线重新分布?
下一篇: pycharm的那些事