Using Jquery+ajax+json how to implement pagination display attached java+jquery implement asynchronous paging _ajax related

First show you the running effect chart:

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> 

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 Record 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= ' col1 ' ><input type= ' checkbox ' value= ' +parseint (j + 1) + "'/></span>"). Append ("<span class= ' col2 ' > ' + parseint (j + 1) + "</span>") Append ("<span class= ' col3 ' >" + dataroot[j].mobi Le + "</span>"). Append ("<span class= ' Col4 ' >" + dataroot[j].province + "&Lt;/span> "). Append (" <span class= ' col5 ' > "+ dataroot[j].gateway +" </span> "). Append (" <span c lass= ' 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; When traversing to the last record, jump out of the loop} $ (". Li-tag"). EQ (k). Append ("<span class= ' col1 ' ><input type= ' checkbox ' Valu E= ' "+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 ();  })

Ps:java+jquery Implement asynchronous paging

A recent project requires the implementation of asynchronous paging, a simple write, the bad please point out ~

/** * Pagination class/public class Pagebean {publicint rowcount = 0;//total record number publicint currentpage = 1;//Current page Publici NT Sizeperpage = 20;//per page display bar Publicint pagecount = 0;//Total pages publicstring pageurl;//request URL publicstring pagedispl ay;//JSP page display publicstring Pagestyle = "NumberStyle";//Paging style publicint Pagepreoffset = 10;//forward Offset Publicint page 
  Nextoffset = 9;//Backward offset publicstring pagecss;//reserved 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.cu Rrentpage + 1) + ""); return false; ' 
    "; String preclick= "onclick= ' Ajaxpage (" "+this.pageurl+" "currentpage=" + (this.currentpage-1) + ""); 
    "; String firstclick= "onclick= ' Ajaxpage (" "+this.pageurl+"? currentpage=1 "); 
    "; String lastclick= "onclick= ' Ajaxpage (" "+this.pageurl+" "currentpage=" + (This.getpagecount ()) + ""); 
    "; String onchange= "onchange= ' Ajaxpage (" "+this.pageurl+" "currentpage=" + (1) + ""); return false; ' 
    "; 
    StringBuffer pagestring =new stringbuffer (); 
    Pagestring.append ("<div class= '" + This.pagestyle + "' ><span >"); Number style if ("NumberStyle". Equalsignorecase (This.pagestyle)) {//If only one page is required, no paging if (This.getpagecount () ==1 
      ) {//Pagestring.append ("<strong> 1</strong>"); }else {if (This.currentpage &GT;1) {//If the current page is greater than 1,<< < available pagestring.append ("<a class= ' Pagination-first '" +firstclick+ ' title= ' home ') 
          href= ' "+ This.pageurl +"? currentpage=1 ' ><<</a> '); Pagestring.append ("<a class= ' Pagination-prev '" +preclick+ "title= ' prev ' href= '" + This.pageurl + "? CurrentP 
        Age= "+ (this.currentpage-1) +" ' ><</a> "); 
          }else {pagestring. Append ("<a class= ' Pagination-first ' ><<</a>"); 
        pagestring. Append ("<a class= ' Pagination-prev ' ><</a>"); 
            //define forward offset Intpreoffset = this.currentpage-1 > this.pagepreoffset? this.pagepreoffset 
        : this.currentpage-1; 
            Define backward Offset Intnextoffset = This.getpagecount ()-this.currentpage >this.pagenextoffset? this.pagenextoffset 
        : This.getpagecount ()-this.currentpage; Loops display link numbers, ranging from the current page offset toCurrent page plus 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) {//Current page bold to display pagestring. Append ("<strong style= ' Color:black;bor 
          der:0 ' > ' + i + "</strong>"); }else {pagestring.append ("<a" +numclick+ "href=" "+ This.pageurl +"? currentpage= "+ i +") 
          > "+ i +" </a> "); }//If the current page is less than the total number of pages,> >> available if (This.currentpage <this.getpagecount ()) {Pag Estring.append ("<a class= ' pagination-next '" +nextclick+ "title= ' next page ' href= '" + This.pageurl + "? currentpa 
          Ge= "+ (This.currentpage + 1) +" ' >></a> "); Pagestring.append ("<a class= ' pagination-last '" +lastclick+ "title= ' End ' 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> total 1 pages </strong>"); }else {if (this.currentpage >1) {pagestring.append (<a class= ' Pagination-first ' "+firstclick+" 
          Title= ' home ' href= ' "+ This.pageurl +"? currentpage=1 ' ><<</a> '); Pagestring.append ("<a class= ' Pagination-prev '" +preclick+ "title= ' prev ' href= '" + This.pageurl + "? CurrentP 
        Age= "+ (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 ')" +nextCli ck+ "title= ' next page ' href= '" + This.pageurl + "? currentpage=" + (This.currentpage + 1) + "' >> 
          </a> "); Pagestring.append ("<a class= ' pagination-last '" +lastclick+ "title= ' End ' href= '" + This.pageurl + "? CurrentP 
        Age= "+ (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&gt ; 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 Valu 
      E=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 Valu E=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 Valu 
      E=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 V 
      Alue=20>20</option><option value=30>30</option><option value=50>50</option> "); 
    Break 
  } returnsb.tostring (); 
}//Background 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;//default} else{Page.setsi Zeperpage (Integer.valueof (request.gEtparameter ("Persize")); 
    } page.setrowcount (List.size ()); 
    Page.setpagestyle ("Normalstyle"); Page.setpagepreoffset (5);//default//page.setpagenextoffset (4);//default 9 Page.setpageurl (request.getReque 
Sturl (). 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=" +$ ("#page 
  Select "). Val (); 
    $.ajax ({type: "POST", Url:action, Success:function (msg) {//callback function, background concatenation string return msg//delete original data, add new data 
  For example: $ ("#displayTable >thead"). Nextall (). Remove (); $ ("#displayTable"). Append (msg); 
} 
  }); }

The above is this article to introduce you to the use of Jquery+ajax+json how to implement pagination display attached java+jquery asynchronous paging, I hope to help.