Use jquery to write a simple asynchronous paging plug-in _jquery

Write a jquery asynchronous paging plug-in, take out to share, there is not perfect place please advise.
Take user pagination as an example, first look at the effect, first is the first page:

Next page or click on the second page:

Click Last:

Is the effect OK? To see how to use, first backstage to have a page model:
Page.java:

public class Page {/** * Current page number */private int currpagenum = 1; 
  
 /** * Total Record number * * Private int totalrowsize = 0; 
  
 /** * The number of records per page * * Private int pagerowsize = 10; 
 public int Getcurrpagenum () {return currpagenum; 
 The public void setcurrpagenum (int currpagenum) {this.currpagenum = Currpagenum; public int Gettotalpagenum () {Int. Total = (totalrowsize%pagerowsize==0)? ( 
  totalrowsize/pagerowsize):(totalrowsize/pagerowsize+1); 
 return total; 
 public int gettotalrowsize () {return totalrowsize; 
 The public void settotalrowsize (int totalrowsize) {this.totalrowsize = totalrowsize; 
 public int getpagerowsize () {return pagerowsize; 
 The public void setpagerowsize (int pagerowsize) {this.pagerowsize = pagerowsize; 
   
  public int Getfirstresult () {if (Getcurrpagenum () <=0) return 0; 
 return Getpagerowsize () * (Getcurrpagenum ()-1); public int Getmaxresult () {return this.getfirstrEsult () +this.getpagerowsize (); 
 
 } 
  
}

And then look at list_user.jsp:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

You can see that the element with ID tbody is the display container for the paging content, and the element with ID Pagewidget as the paging control display container.
A buildhtml () function is then provided to specifically build the paging content.
Using an asynchronous paging plug-in is simple, as long as you call:

$ ("#pageWidget"). Asynpage ("/user/finduser_asyn.action", "#tbody", buildhtml,totalrowsize); 

This is the most simplified invocation. You can also send additional query parameters, as well as customize each page to display the number of records, the specific use of the details of Plug-ins to see the specific introduction.
The following are the contents of the Asynpage plug-in:

* * ===================ajax Asynchronous Paging ================= * * Copyright 8, ZHUTX * * Assume the ID is pagewidget div is you place paging control A container of a piece, it is invoked as follows: * $ ("#pageWidget"). Asynpage ("/user/finduser_asyn.action", "#tbody", buildhtml,totalrowsize,{" 
 Pagerowsize ": 10}); * Parameter Description: *------------Required-----------* parameter one: request URL * parameter two: page container of render result set * parameter three: the function of rendering result set to the page * parameter four: Total record number *------ ------Optional-----------* Parameter five (JSON object): * Property Pagerowsize: Number of records per page (not configured, defaults to 20) * Property param: Request parameters (JSON format) */function ($) 
 {var settings; 
 var page; 
  
 var paramstr; 
   $.fn.asynpage = function (url,contentcontainer,buildhtml_fun,totalrowsize,callersettings) {settings = $.extend ({ Currpagenum:1, pagerowsize:20, Param:null},callersettings| | 
  
  {}); 
  Settings.contentcontainer = $ (Contentcontainer); 
  Settings.url = URL; 
  Settings.pagewidget = this; 
  Settings.totalrowsize = totalrowsize; 
   
  Settings.buildhtml_fun = Buildhtml_fun; page = new page (settings.currpagenum,settings.totalrowsiZe,settings.pagerowsize); 
   
  Paramstr = Makeparamstr (Settings.param); 
   
  Start fetching Data Fetchdata (Page.getcurrpagenum ()); 
 return this; 
  
 }; 
  /* Converts JSON to request parameter String */var trunparamconfig2requestparamstr = function (JSON) {var str = ""; 
   For (key in JSON) {if (str== "") {str + = key+ "=" +json[key]; 
   }else{str = "&" +key+ "=" +json[key]; 
 } return str; 
  
 }; 
  /* The configuration parameter is spliced to the request string/var makeparamstr = function (Param_json) {if (param_json==null) {return ""; 
  }else{return Trunparamconfig2requestparamstr (Param_json); 
  
 } 
 }; 
  * * Responsible for obtaining background data, after acquisition will trigger the construction of paging control/var fetchdata = function (currpagenum) {page.setcurrpagenum (currpagenum); 
  var firstresult = Page.getfirstresult (); 
  var maxresult = Page.getmaxresult (); 
   
  var pagerowsize = Page.getpagerowsize (); 
  var data = null; if (paramstr) {data = Paramstr + "&page.currpagenum=" +currpagenum+ "&page.pagerowsize=" +pagerowsize+ "& Page.firstresult= "+firstresult+ "&page.maxresult=" +maxresult; }else{data = "page.currpagenum=" +currpagenum+ "&page.pagerowsize=" +pagerowsize+ "&page.firstresult=" + 
  firstresult+ "&page.maxresult=" +maxresult; } $.ajax ({type: POST, Url:settings.url, Data:d ata, Success:function (datas) {settings.co 
    Ntentcontainer.empty (); 
    Settings.buildhtml_fun (datas); Buildpagewidget (page)//Trigger build paging control}, Error:function (Xmlhttprequest,textstatus,errorthrown) {if (Textstatus = = 
     Error ") {var error = eval (' (' +xmlhttprequest.responsetext+ ') '); Alert ("Sorry: +error.errorcode+", "+error.message+"!) 
    "); 
 } 
   } 
  }); 
  
 }; 
 var truntargetpage = function (pagenum) {fetchdata (pagenum); 
  /* * Bind event for paging control/var bindevent = function () {var links = settings.pageWidget.find ("a"); 
   $.each (Links,function (i,link) {var link = $ (link); 
   var pagenum = link.attr ("Pagenum"); Link.click (function () {truntargetpage (pagenum);
   }); 
 }); } * * To build the specific algorithm implementation of the paging control/var buildpagewidget = function (page) {////before building the paging control, first clean the existing control settings.pageWidget.empty () 
   
  ; /*---------------begin to enter the real paging control build process--------------/*---------------1. Start: Build descriptive information such as "total Page? Record ")-----------------* * Settings.pageWidget.append (" <div class= ' total ' > <span> "+ Page.gettotalpagenum () + "</span> page  <span>" +page.gettotalrowsize () + </span> Records </div> 
  "); 
  Settings.pageWidget.append ("<ul>"); /*---------------1. End: Build descriptive information such as "total? Page? Record ")-----------------/*---------------2. Start: Build" Home "and" prev "Controls-------------/var currpagenum = number (page 
  . Getcurrpagenum ()); 
   
  var totalpagenum = number (Page.gettotalpagenum ()); if (currpagenum==1) {//If you want the current page to be the first page, also allow the "home" and "prev" Controls to appear, you can add}else{settings.pageWidget.find ("ul") here. Append ("<li><a id= ' pagenum= ' 1 ' href= ' Javascript:void" (0); ' title= ' home ' class= ' first ' > Home </a></li> ' 
   ); SettingS.pagewidget.find ("ul"). Append ("<li><a id= ' pagenum= '" "+ (currPageNum-1) +" ' href= ' javascript:void (0); ' 
  title= ' last page ' class= ' prev ' > Prev </a></li> '); 
  }/*---------------2. End: Build "Home" and "prev" Controls-------------/*---------------3. Start: To build a paging digital control--------------/* if (totalpagenum<10) {for (Var i=1;i<=totalpagenum;i++) {if (i==currpagenum) {Settings.pageWidget.find (" UL "). Append (" <li><a id= ' pagenum= "" +i+ "" href= "javascript:void (0); ' title= ' class= ' current ' > ' +i+ ' < 
    /a></li> "); }else{settings.pageWidget.find ("ul"). Append ("<li><a id=" ' pagenum= ' "+i+" ' href= ' javascript:void (0); ' Titl E= ' class= ' javascript:truntargetpage ("+i+"); ' 
    > "+i+" </a></li>); }//If the total number of pages >=10}else{//If the current page is less than 5, display 1-9 items and memory the current item if (CURRPAGENUM&LT;5) {for (var i =1;i<10;i++) {if (i==currpagenum) {settings.pageWidget.find ("ul"). Append ("<li><a id= ' pagenum= '" +i+ "' href=")' Javascript:void (0); ' title= ' class= ' current ' > ' +i+ ' </a></li> '); }else{settings.pageWidget.find ("ul"). Append ("<li><a id=" ' pagenum= ' "+i+" ' href= ' javascript:void (0); ' Titl 
     E= ' class= ' ">" +i+ "</a></li>"); }//If the current page is >=5 and the total number of pages is the difference from the current page <4}else if (totalpagenum-currpagenum<4) {for (Var i=totalpagenum-8;i&lt =totalpagenum;i++) {if (i==currpagenum) {settings.pageWidget.find ("ul"). Append ("<li><a id=" Pagenum 
     = ' "+i+" ' href= ' javascript:void (0); ' title= ' class= ' current ' > ' +i+ ' </a></li> '); }else{settings.pageWidget.find ("ul"). Append ("<li><a id=" ' pagenum= ' "+i+" ' href= ' javascript:void (0); ' Titl 
     E= ' class= ' ">" +i+ "</a></li>"); }//If the current page is >=5, displays 9 items around the current page and remembers the current item}else{for (Var i=currpagenum-4;i<currpagenum+5;i++) {if (i ==currpagenum) {settings.pageWidget.find ("ul"). Append ("<li><a id=" "pagenum=" "+i+"' href= ' javascript:void (0); ' title= ' class= ' current ' > ' +i+ ' </a></li> ');  }else{settings.pageWidget.find ("ul"). Append ("<li><a id= ' pagenum= '" +i+ "' href= ' Javascript:void" ("+i+"); ' 
     title= ' class= ' ">" +i+ "</a></li>"); ---------------3. End: Build a paging digital control--------------*/*---------------4. Start: Build the next page and last control-- -----------/if (totalpagenum==currpagenum) {//If you want the current page to be the last page, also allow the "last" and "Next" controls to appear, you can add}else{here setting S.pagewidget.find ("ul"). Append ("<li><a id= ' pagenum= '" "+ (currpagenum+1) +" ' href= ' javascript:void (0); ' 
   Title= ' Next ' class= ' Next ' > Next ' </a></li> '); Settings.pageWidget.find ("ul"). Append ("<li><a id= ' pagenum= '" +totalpagenum+ "' href= ' Javascript:void" (0); ' 
  Title= ' End ' class= ' last ' > End </a></li> '); 
 }/*---------------4. End: Build "Next Page" and "Last" control-------------//Also to bind the control to the point hit event bindevent (); 
 
}) (JQuery); /* Page class/FUnction Page (currpagenum,totalrowsize,pagerowsize) {this.currpagenum = Currpagenum; 
 This.totalrowsize = totalrowsize; 
This.pagerowsize = pagerowsize; 
} Page.prototype.getCurrPageNum = function () {return this.currpagenum; 
}; 
Page.prototype.setCurrPageNum = function (currpagenum) {this.currpagenum = Currpagenum; 
}; Page.prototype.getTotalPageNum = function () {return (this.totalrowsize%this.pagerowsize==0)? ( 
This.totalrowsize/this.pagerowsize):(Math.floor (this.totalrowsize/this.pagerowsize) +1); 
}; 
Page.prototype.getTotalRowSize = function () {return this.totalrowsize; 
}; 
Page.prototype.setTotalRowSize = function (totalrowsize) {this.totalrowsize = totalrowsize; 
}; 
Page.prototype.getPageRowSize = function () {return this.pagerowsize; 
}; 
Page.prototype.setPageRowSize = function (pagerowsize) {this.pagerowsize = pagerowsize; 
}; 
 Page.prototype.getFirstResult = function () {if (This.getcurrpagenum () <=0) return 0; return This.getpagerowsize () * (this.getcurrpaGenum ()-1); 
}; 
Page.prototype.getMaxResult = function () {return this.getfirstresult () + this.getpagerowsize ();  };

The above is the entire content of this article, I hope to help you learn.