How to Implement paging display using Jquery + Ajax + Json with JAVA + JQuery for asynchronous Paging

This article introduces how to implement data paging display based on jquery + ajax + json and asynchronous paging Based on JAVA + JQuery. The code in this article is easy to understand and has reference value, if you are interested in learning together, let's show you how to run:

1. The background action generates json data.

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
 
  
2. struts. xml configuration
  
  
     
     
    UTF-8  
    /WEB-INF/jsp/manage/black. jsp  
   
  

  
3. js retrieve json data display by PAGE
  
Function getJSONData (pn) {// alert (pn); $. getJSON ("blackList. ce ", function (data) {var totalCount = data. totalCount; // The total number of records var pageSize = 10; // several records are displayed on each page. var pageTotal = Math. ceil (totalCount/pageSize); // total number of pages 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 ('
');} Var dataRoot = data. jsonRoot; if (pageTotal = 1) {// for (var j = 0; j <totalCount; j ++) {$ (". li-tag "). eq (j ). append (""). Append ("" + parseInt (j + 1) + ""). append ("" + dataRoot [j]. mobile + ""). append ("" + dataRoot [j]. province + ""). append ("" + dataRoot [j]. gateway + ""). append ("" + dataRoot [j]. insertTime + ""). append ("" + dataRoot [j]. remark + "")} else {for (var j = startPage, k = 0; j <endPage, k <pageSize; j ++, k ++) {if (j = totalCount) {break; // The loop jumps out when the last record is traversed} $ (". li-tag "). eq (k ). append (""). Append ("" + parseInt (j + 1) + ""). append ("" + dataRoot [j]. mobile + ""). append ("" + dataRoot [j]. province + ""). append ("" + dataRoot [j]. gateway + ""). append ("" + dataRoot [j]. insertTime + ""). append ("" + dataRoot [j]. remark + "") }}$ (". page-count "). text (pageTotal) ;})} function getPage () {$. getJSON ("blackList. ce ", function (data) {pn = 1; var totalCount = data. totalCount; // total number of records var pageSize = 1 0; // several records are displayed on each page. var pageTotal = Math. ceil (totalCount/pageSize); // total number of pages $ ("# next "). click (function () {if (pn = pageTotal) {alert ("No more"); pn = pageTotal;} else {pn ++; gotoPage (pn) ;}}); $ ("# prev "). click (function () {if (pn = 1) {alert ("No before"); pn = 1 ;}else {pn --; gotoPage (pn) ;}}) $ ("# firstPage "). click (function () {pn = 1; gotoPage (pn) ;}); $ ("# lastPage "). click (function () {pn = pageT Otal; gotoPage (pn) ;}); $ ("# page-jump "). click (function () {if ($ (". page-num "). val () <= pageTotal & $ (". page-num "). val ()! = '') {Pn = $ (". page-num "). val (); gotoPage (pn);} else {alert (" the page number you entered is incorrect! "); $ (". Page-num "). val (''). focus () ;}) $ ("# firstPage "). trigger ("click") ;}} function gotoPage (pn) {// alert (pn); $ (". current-page "). text (pn); getJSONData (pn) }$ (function () {getPage ();})
  
   
  

  
Ps: JAVA + JQuery Implement Asynchronous Paging
  
A recent project requires asynchronous paging. I wrote it briefly. If not, please point out ~
  
/*** Paging class */public class PageBean {publicint rowCount = 0; // The total number of records publicint currentPage = 1; // the current page number publicint sizePerPage = 20; // number of entries displayed per page publicint pageCount = 0; // total number of pages publicString pageURL; // request URL publicString pageDisplay; // publicString pageStyle = "numberStyle" displayed on the JSP page "; // pagination style publicint pagePreOffset = 10; // forward offset publicint pageNextOffset = 9; // backward offset publicString pageCss; // reserved publicString getPa GeCss () {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 () {returnpageNe XtOffset;} publicvoid upload (response) {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 ("
"); // Numeric style if (" numberStyle ". equalsIgnoreCase (this. pageStyle) {// if there is only one page, if (this. getPageCount () = 1) {// pageString. append ("1");} Else {if (this. currentPage> 1) {// if the current page number is greater than 1, <
    <可用 pagestring.append("<< "); pagestring.append("< }else { pagestring .append("<< .append("< } 定义向前偏移量 intpreoffset="this.currentPage" -1>
     
This. pagePreOffset? This. pagePreOffset: this. currentPage-1; // defines the backward offset intnextOffset = this. getPageCount ()-this. currentPage> this. pageNextOffset? This. pageNextOffset: this. getPageCount ()-this. currentPage; // The Link number is displayed cyclically, And the range is from the current page minus the forward offset to the current page plus the backward offset 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 ("
     "+ I +"");} Else {pageString. append (" "+ I +" ") ;}// if the current page is smaller than the total number of pages, >>> available if (this. currentPage
     
      
"); PageString. append (">");} else {pageString. append (">"); pageString. append (">");} pageString. append ("
      "+ This. getOptions () +"") ;}} Else if (" normalStyle ". inclusignorecase (this. pageStyle) {if (this. getPageCount () = 1) {pageString. append ("
      1 page in total");} Else {if (this. currentPage> 1) {pageString. append ("<"); pageString. append ("<");} else {pageString. append ("<"); pageString. append ("<");} pageString. append ("th" + this. currentPage + "Page/" + this. pageCount + "page"); if (this. currentPage
      
       
"); PageString. append (">");} else {pageString. append (">"); pageString. append (">");} pageString. append ("
       "+ This. getOptions () +"") ;}} PageString. append ("
      
     
    
"); 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 ("10203050100"); Break; case20: sb. append ("20103050100"); Break; case30: sb. append ("30102050100"); Break; case50: sb. append ("50102030100"); Break; case100: sb. append ("10010203050"); Break;} returnsb. toString () ;}/// call 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 ,. 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-B Lock; 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) {// callback function, background concatenation string returns msg // deletes the original data, add new data // For example: $ ("# displayTable> thead "). nextAll (). remove (); $ ("# displayTable "). append (msg );}});}
  
   
  

  
For more information about how to use Jquery + Ajax + Json to display pages by page. For more information about how to use JAVA + JQuery to Implement Asynchronous paging, see the PHP Chinese website!