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

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

Run the following command:

1. Background actions generate 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 <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 (","); // Delete the last comma (sb. append ("]}"); HttpServletResponse response = ServletActionContext. getResponse (); response. setContentType ("text/plain"); response. getWriter (). print (sb );

2. struts. xml configuration

<Action name = "blackList" class = "blackAction" method = "blackList"> <! -- Plaintext is used to display the result type of the original page code --> <result type = "plainText"> <param name = "charSet"> UTF-8 </param> <param name = "location" >/WEB-INF/jsp/manage/black. jsp </param> </result> </action>

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 ('<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 + "</s Pan> "). 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; // The loop jumps out when the last record is traversed} $ (". 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; // 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 $ ("# 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 = pageTotal; 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 ge TPageCss () {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 () {returnpag ENextOffset;} 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 ("<div class = '" + this. pageStyle + "'> <span>"); // digital style if ("numberStyle ". equalsIgnoreCase (this. pageStyle) {// if there is only one page, if (this. getPageCount () = 1) {// pageString. append ("<strong> 1 </strong>");} else {if (this. currentPage> 1) {// if the current page number is greater than 1, <pageString is available. append ("<a class = 'pagination-firs T' "+ firstClick +" title = 'homepage 'href =' "+ this. pageURL + "? CurrentPage = 1'> </a> "); pageString. append ("<a class = 'pagination-prev'" + preClick + "title = 'previous page 'href = '" + this. pageURL + "? CurrentPage = "+ (this. currentPage-1) + "'> </a>");} else {pageString. append ("<a class = 'pagination-first '> </a>"); pageString. append ("<a class = 'pagination-prev'> </a>");} // defines the forward offset 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) {// the current page must be bold to show pageString. append ("<strong style = 'color: black; border: 0'>" + I + "</strong>") ;}else {pageString. append ("<a" + numClick + "href = '" + this. pageURL + "? CurrentPage = "+ I +" '> "+ I +" </a> ") ;}// if the current page is smaller than the total number of pages, >>> available if (this. currentPage <this. getPageCount () {pageString. append ("<a class = 'pagination-next'" + nextClick + "title = 'Next page 'href = '" + this. pageURL + "? CurrentPage = "+ (this. currentPage + 1) + "'>></a>"); pageString. append ("<a class = 'pagination-last'" + lastClick + "title = 'end page' 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 page in total </strong> ");} Else {if (this. currentPage> 1) {pageString. append ("<a class = 'pagination-first '" + firstClick + "title = 'homepage 'href ='" + this. pageURL + "? CurrentPage = 1'> </a> "); pageString. append ("<a class = 'pagination-prev'" + preClick + "title = 'previous page '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 + "Page/" + this. pageCount + "page </span>"); if (this. currentPage <this. getPageCount () {pageString. append ("<a class = 'pagination-next'" + nextClick + "title = 'Next page 'href = '" + th Is. pageURL + "? CurrentPage = "+ (this. currentPage + 1) + "'>></a>"); pageString. append ("<a class = 'pagination-last'" + lastClick + "title = 'end page' 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 (Str Ing 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 = currentPa Ge;} 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; ca Se20: 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 val Ue = 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 () ;}/// call PageBean page = new PageBean (); setPageInfo (list, request); public void setPageIn Fo (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. s EtPageURL (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-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: Gene Va, 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 );}});}

The above section describes how to use Jquery + Ajax + Json to implement paging display with JAVA + JQuery to Implement Asynchronous paging. I hope this will be helpful to you.