Based on Jquery+ajax+json implementation of pagination display attached effect diagram _jquery

1. 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 Related Configuration

<action name= "Blacklist" class= "Blackaction" Method= "blacklist" > 
<!--plaintext The result type used to display the page's original code--> 
<result type= "plaintext" > 
<param name= "CharSet" >UTF-8</param> 
<param name= " Location ">/WEB-INF/jsp/manage/black.jsp</param> 
</result> 
</action>

3.js Get JSON data paging display

function Getjsondata (PN) {//alert (PN);  $.getjson ("Blacklist.ce", function (data) {var totalcount = Data.totalcount;//total record number var pageSize = 10;//per page display several records Var Pagetotal = Math.ceil (totalcount/pagesize); 
Total 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) {//When only one page is for (var j = 0; J < TotalCount + +) {$ (". Li-tag"). EQ (j). Append ("<span class= ' col 1 ' ><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 ("& Lt;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 = = Totalcoun T) {break;//when traversing to the last record, jump out of Loop} $ (". 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; Total record number var pageSize = 10; Show several records per page var pagetotal = Math.ceil (totalcount/pagesize); 
Total pages $ ("#next"). Click (function () {if (pn = pagetotal) {alert ("not behind"); 
PN = pagetotal; 
else {pn++; 
GotoPage (PN); 
} 
}); 
$ ("#prev"). Click (function () {if (pn = 1) {alert ("not preceded"); 
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 (); })