使用Jquery+Ajax+Json如何?分頁顯示附JAVA+JQuery實現非同步分頁_AJAX相關

先給大家展示下運行效果圖：

 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='" + this.pageURL               +"?currentPage=1'><<</a> ");           pageString.append("<a class='pagination-prev' "+preClick+"title='上一頁' href='" + 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='"+ this.pageURL                 +"?currentPage=" + i + "'>" + i +"</a> ");           }         }         // 如果當前頁小於總頁數，> >>可用         if(this.currentPage <this.getPageCount()) {           pageString.append("<a class='pagination-next' "+nextClick+" title='下一頁' href='" + this.pageURL               +"?currentPage=" + (this.currentPage +1)               +"'>></a> ");           pageString.append("<a class='pagination-last' "+lastClick+"title='尾頁' href='" + 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='" + this.pageURL               +"?currentPage=1'><<</a> ");           pageString.append("<a class='pagination-prev' "+preClick+"title='上一頁' href='" + 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='" + this.pageURL               +"?currentPage=" + (this.currentPage +1)               +"'>></a> ");           pageString.append("<a class='pagination-last' "+lastClick+"title='尾頁' href='" + 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實現非同步分頁，希望對大家有所協助。