使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

前端  /  管理员 发布于 5年前   351

先给大家展示下运行效果图：

 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(); }) 

ps：JAVA+JQuery实现异步分页

最近一个项目要求实现异步分页，简单的写了一下，不好的请指出~

/** *分页类 */ public class PageBean {   publicint rowCount = 0; // 总记录数   publicint currentPage = 1;// 当前页数   publicint sizePerPage = 20;// 每页显示条数   publicint pageCount = 0;// 总页数   publicString pageURL;// 请求URL   publicString pageDisplay;// JSP页面显示   publicString pageStyle = "numberStyle";// 分页样式   publicint pagePreOffset = 10;// 向前偏移量   publicint pageNextOffset = 9;// 向后偏移量   publicString pageCss;// 预留   publicString getPageCss() {     returnpageCss;   }   publicvoid setPageCss(String pageCss) {     this.pageCss = pageCss;   }   publicString getPageStyle() {     returnpageStyle;   }   publicvoid setPageStyle(String pageStyle) {     this.pageStyle = pageStyle;   }   publicint getPagePreOffset() {     returnpagePreOffset;   }   publicvoid setPagePreOffset(intpagePreOffset) {     this.pagePreOffset = pagePreOffset;   }   publicint getPageNextOffset() {     returnpageNextOffset;   }   publicvoid setPageNextOffset(intpageNextOffset) {     this.pageNextOffset = pageNextOffset;   }   publicString getPageDisplay() {     String nextClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage + 1)+"");return false;' ";     String preClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage - 1)+"");return false;' ";     String firstClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=1");return false;' ";     String lastClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.getPageCount())+"");return false;' ";     String onChange=" onchange='ajaxpage(""+this.pageURL+ "?currentPage=" + (1)+"");return false;' ";     StringBuffer pageString =new StringBuffer();     pageString.append("<div class='"+ this.pageStyle +"'><span >");     // 数字样式     if("numberStyle".equalsIgnoreCase(this.pageStyle)) {       // 如果只有一页，不需要分页       if(this.getPageCount() ==1) {         // pageString.append("<strong> 1</strong> ");       }else {         if(this.currentPage >1) {// 如果当前页数大于1，<< <可用           pageString.append("<a class='pagination-first' "+firstClick+" title='首页' href='//article/" + this.pageURL               +"?currentPage=1'><<</a> ");           pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='//article/" + this.pageURL               +"?currentPage=" + (this.currentPage -1)               +"'><</a> ");         }else {           pageString               .append("<a class='pagination-first'><<</a> ");           pageString               .append("<a class='pagination-prev'><</a> ");         }         // 定义向前偏移量         intpreOffset = this.currentPage -1 > this.pagePreOffset ?this.pagePreOffset             :this.currentPage -1;         // 定义向后偏移量         intnextOffset = this.getPageCount() -this.currentPage >this.pageNextOffset ?this.pageNextOffset             :this.getPageCount() -this.currentPage;         // 循环显示链接数字，范围是从 当前页减向前偏移量 到 当前页加向后偏移量         for(int i = (this.currentPage - preOffset); i <= (this.currentPage + nextOffset); i++) {           String numClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (i)+"");return false;' ";           if(this.currentPage == i) {// 当前页要加粗显示             pageString                 .append("<strong style='color:black;border:0'>"                     + i +"</strong> ");           }else {             pageString.append("<a "+numClick+"href='//article/"+ this.pageURL                 +"?currentPage=" + i + "'>" + i +"</a> ");           }         }         // 如果当前页小于总页数，> >>可用         if(this.currentPage <this.getPageCount()) {           pageString.append("<a class='pagination-next' "+nextClick+" title='下一页' href='//article/" + this.pageURL               +"?currentPage=" + (this.currentPage +1)               +"'>></a> ");           pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='//article/" + this.pageURL               +"?currentPage=" + (this.getPageCount()) +"'>>></a> ");         }else {           pageString               .append("<a class='pagination-next' >></a> ");           pageString               .append("<a class='pagination-last'>>></a> ");         }          pageString.append("<select id='pageSelect' "+onChange+">"+this.getOptions()+"</select>");       }     }else if("normalStyle".equalsIgnoreCase(this.pageStyle)) {       if(this.getPageCount() ==1) {         pageString.append("<strong> 共1页</strong> ");       }else {         if(this.currentPage >1) {           pageString.append("<a class='pagination-first' "+firstClick+" title='首页' href='//article/" + this.pageURL               +"?currentPage=1'><<</a> ");           pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='//article/" + this.pageURL               +"?currentPage=" + (this.currentPage -1)               +"'><</a> ");         }else {           pageString             .append("<a class='pagination-first'><<</a> ");           pageString             .append("<a class='pagination-prev'><</a> ");         }         pageString.append("<span class='pageinfo'>第"+this.currentPage+"页/"+this.pageCount+"页</span>");         if(this.currentPage <this.getPageCount()) {           pageString.append("<a class='pagination-next' "+nextClick+" title='下一页' href='//article/" + this.pageURL               +"?currentPage=" + (this.currentPage +1)               +"'>></a> ");           pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='//article/" + this.pageURL               +"?currentPage=" + (this.getPageCount()) +"'>>></a> ");         }else {           pageString             .append("<a class='pagination-next' >></a> ");           pageString             .append("<a class='pagination-last'>>></a> ");         }         pageString.append("<select id='pageSelect' "+onChange+">"+this.getOptions()+"</select>");       }     }     pageString.append("</span></div>");     this.pageDisplay = pageString.toString();     returnpageDisplay;   }   publicvoid setPageDisplay(String pageDisplay) {     this.pageDisplay = pageDisplay;   }   publicString getPageURL() {     returnpageURL;   }   publicvoid setPageURL(String pageURL) {     this.pageURL = pageURL;   }   publicint getPageCount() {     this.pageCount =this.rowCount %this.sizePerPage ==0 ? (this.rowCount /this.sizePerPage)         : (this.rowCount /this.sizePerPage) +1;     returnthis.pageCount;   }   publicvoid setPageCount(intpageCount) {     this.pageCount = pageCount;   }   publicint getRowCount() {     returnrowCount;   }   publicvoid setRowCount(introwCount) {     this.rowCount = rowCount;   }   publicint getCurrentPage() {     returncurrentPage;   }   publicvoid setCurrentPage(intcurrentPage) {     this.currentPage = currentPage;   }   publicint getSizePerPage() {     returnsizePerPage;   }   publicvoid setSizePerPage(intsizePerPage) {     this.sizePerPage = sizePerPage;   }   privateString getOptions(){     StringBuffer sb =new StringBuffer();     switch(this.sizePerPage) {     case10:         sb.append("<option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>");       break;     case20:       sb.append("<option value=20>20</option><option value=10>10</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>");       break;     case30:       sb.append("<option value=30>30</option><option value=10>10</option><option value=20>20</option><option value=50>50</option><option value=100>100</option>");       break;     case50:       sb.append("<option value=50>50</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=100>100</option>");       break;     case100:       sb.append("<option value=100>100</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option>");       break;     }     returnsb.toString();   } }//后台调用 PageBean page = new PageBean(); setPageInfo(list,request); public void setPageInfo(List list,HttpServletRequest request){     page.setCurrentPage(this.getCurrentPage());     if(request.getParameter("perSize")==null){       page.setSizePerPage(20);//default 20     }     else{       page.setSizePerPage(Integer.valueOf(request.getParameter("perSize")));     }     page.setRowCount(list.size());     //page.setPageStyle("normalStyle");     //page.setPagePreOffset(5);//default 10     //page.setPageNextOffset(4);//default 9     page.setPageURL(request.getRequestURL().toString()); } [css] view plaincopyprint?/** **  CSS */ .numberStyle,.normalStyle {   text-align:left; } .numberStyle a,.normalStyle a { display: inline-block; color: #5489F1;  text-decoration: none; font-size: 14px; font-weight:bold; font-family: Geneva, Arial, Helvetica, sans-serif; border: 1px solid #999; width: 20px; height: 20px; line-height: 20px; text-align: center; background-position:center; } .numberStyle strong,.normalStyle strong { display: inline-block; color: #5489F1;  text-decoration: none; font-size: 14px; font-weight:bold; font-family: Geneva, Arial, Helvetica, sans-serif; border: 1px solid #999; width: 20px; height: 20px; line-height: 20px; text-align: center; background-position:center; } .numberStyle a:hover,.normalStyle a:hover{ background-color: #d0d0d0; } .normalStyle .pageinfo{   font-size: 14px;   font-family: Geneva, Arial, Helvetica, sans-serif;   color: #5489F1; } [javascript] view plaincopyprint?/** ** JS import jquery.js before call function */ function ajaxpage(action){   action=action+"&perSize="+$("#pageSelect").val();   $.ajax( {   type : "POST",   url : action,   success : function(msg) {   //回调函数，后台拼接字符串返回msg     //删除原有数据，添加新数据     //比如：$("#displayTable>thead").nextAll().remove();$("#displayTable").append(msg);   }   }); }

以上就是本文给大家介绍的使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页，希望对大家有所帮助。