Display by Page Based on Jquery + Ajax + Json

Implement paging display Attachment based on Jquery + Ajax + Json and jqueryjson

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

I am not very familiar with Jquery. I want to make a special effect, using Jquery, Json, Ajax implementation, page image loading and page display.

The score is also 5 points. I don't want to give it a lot.
I usually ignore anything I don't give.
What's more, you just answered the question and people deleted it. Ah ~
 
Implementation of pagination using SSH2 + jquery + json

You can simply use jquery to retrieve all the data, and then directly pagination on the page. This is the code in js/* Page, 4 per page */
$ (Document). ready (function (){
$ ('Ul. paginated2'). each (function () {var currentPage = 0; // display 10 items to hide the items before and after the displayed content
Var numPerPage = 3;
Var $ ul = $ (this );
Var repaginate = function (){
$ Ul. find ('lil'). show ()
. Slice (0, currentPage * numPerPage)
. Hide ()
. End ()
. Slice (currentPage + 1) * numPerPage + 1). hide (). end ();}

Var numRows = $ ('ul. paginated2 li'). length; // Add pagination rows
// Alert (numRows );
Var numPages = Math. ceil (numRows/numPerPage );
Var $ pager =$ ('<div class = "pager"> </div> ');
For (var page = 0; page <numPages; page ++ ){
$ ('<Div class = "page-number">' + (page + 1) + '</div> ')
. Bind ('click', {'newpage': page}, function (event ){
CurrentPage = event. data ['newpage'];
Repaginate ();
$ (This). addClass ('active'). siblings (). removeClass ('active ');
})
. AppendTo ($ pager). addClass ('clickable ');
}
$ Pager. find ('div. page-number: first '). addClass ('active ');
$ Pager. insertBefore ($ ul );
Repaginate ();
});});