Using JQuery to write a simple asynchronous paging plug-in, jquery Paging

Using JQuery to write a simple asynchronous paging plug-in, jquery Paging

I wrote a Jquery asynchronous paging plug-in to share it with you. Please advise if there are any imperfections.
Take the user paging as an example. Let's take a look at the effect first, which is the first page:

Next page or click Next page:

After clicking the last page:

Is the effect okay? To see how to use it, first there must be a Page model in the background:
Page. java:

Public class Page {/*** current Page number */private int currPageNum = 1;/*** total number of records */private int totalRowSize = 0; /*** number of records per page */private int pageRowSize = 10; public int getCurrPageNum () {return currPageNum;} 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;} public void setTotalRowSize (int totalRowSize) {this. totalRowSize = totalRowSize;} public int getPageRowSize () {return pageRowSize;} 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 ();}}

See 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 "> 
The element whose id is tbody is used as the display container of the paging content, and the element whose id is pageWidget is used as the display container of the paging control.
Then a buildHtml () function is provided to build the page content.
It is easy to use the asynchronous paging plug-in, as long as the call is as follows:

$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize); 
This is the most simplified call. You can also upload additional query parameters and customize the number of records displayed on each page. For more information about how to use these parameters, see the plug-in.
The following is the content of the asynPage plug-in:

/** ================================ AJAX asynchronous paging ====================== = ** Copyright 2012 8 23, zhutx ** assume that the div with the id pageWidget is the container where you place the pageWidget. It is called as follows: * $ ("# pageWidget "). asynPage ("/user/findUser_asyn.action", "# tbody", buildHtml, totalRowSize, {"pageRowSize": 10}); * parameter description: * ------------ Required ----------- * parameter 1: request URL * parameter 2: Page container of the rendering result set * parameter 3: function * parameter 4 for rendering the result set to the page: total number of records * ------------ Optional ----------- * parameter 5 (json object): * attribute pageRowSiz E: number of records per page (20 if not configured) * attribute param: Request Parameter (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 = tota LRowSize; settings. buildHtml_fun = buildHtml_fun; page = new Page (settings. currPageNum, settings. totalRowSize, settings. pageRowSize); paramStr = makeParamStr (settings. param); // start to get the data fetchData (page. getCurrPageNum (); return this ;};/* convert json to the 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 ;};/* concatenate the configuration parameter into a request string */var makeParamStr = function (param_json) {if (param_json = null) {return "";} else {return trunParamConfig2RequestParamStr (param_json) ;};/*** obtains Background Data, after obtaining the data, the page control */var fetchData = function (currPageNum) {page is triggered. setCurrPageNum (currPageNum); var firstResult = page. getFirstResult (); var maxResult = page. getMaxResult (); var pageRowSize = page. g EtPageRowSize (); 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: data, succes S: function (datas) {settings. contentContainer. empty (); settings. buildHtml_fun (datas); buildPageWidget (page); // triggers the construction of paging controls}, 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 to the 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) ;}) ;};}/* Specific Algorithm Implementation for building paging controls */var buildPageWidget = function (page) {// clear the settings of the existing control before creating the page control. pageWid Get. empty ();/* --------------- start the construction process of the real paging control ------------ * // * ----------------- 1. Start: Build description information (such as "total? Page ,? Records) --------------- */settings. pageWidget. append ("<div class = 'Total'> total <span>" + page. getTotalPageNum () + "</span> page <span>" + page. getTotalRowSize () + "</span> records </div>"); settings. pageWidget. append ("<ul>");/* --------------- 1. end: Build description information (such as "total? Page ,? Records) ----------------- * // * --------------- 2. start: create the "Homepage" and "Previous page" 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, the "Homepage" and "Previous Page" controls are also allowed, you can add} else {settings. pageWidget. find ("ul "). append ("<li> <a id = ''pagenum = '1' href = 'javascript: void (0 ); 'title = 'homepage' class = 'first'> homepage </a> </li> "); settings. page Widget. find ("ul "). append ("<li> <a id = ''pagenum = '" + (currPageNum-1) + "'href = 'javascript: void (0 ); 'title = 'preg' class = 'prev'> previous </a> </li> ");}/* ------------- 2. end: create the "Homepage" and "Previous Page" controls ----------- * // * --------------- 3. start: Create a paging numeric 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 = 'javas Authorization: void (0); 'title = ''class = 'current'>" + I + "</a> </li>");} else {settings. pageWidget. find ("ul "). append ("<li> <a id = ''pagenum = '" + I + "'href = 'javascript: void (0 ); 'title = ''class = 'javascript: trunTargetPage (" + I + "); '>" + I + "</a> </li> ");}} // if the total number of pages >=10} else {// if the current page is smaller than 5, 1-9 items are displayed, and the current item if (currPageNum <5) is remembered) {for (var I = 1; I <10; I ++) {if (I = currPageNum) {settings. pageWidget. find ("ul "). append ("<li> <a id ='' pageNu M = '"+ 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 ); 'title = ''class =''> "+ I +" </a> </li> ") ;}// if the current page is> = 5, the difference between the total number of pages and the current page <4} else if (totalPageNum-currPageNum <4) {for (var I = totalPageNum-8; 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 ); 'title = ''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: Create the pagination digital control -------------- * // * --------------- 4. start: create the "next page" and "last page" controls ----------- */if (totalPageNum = currPageNum) {// if you want the current page to be the last page, the "last page" and "next page" controls can also appear. Supplement here} else {settings. pageWidget. find ("ul "). append ("<li> <a id = ''pagenum = '" + (currPageNum + 1) + "'href = 'javascript: void (0 ); 'title = 'Next page' class = 'Next'> next pagination </a> </li> "); settings. pageWidget. find ("ul "). append ("<li> <a id = ''pagenum = '" + totalPageNum + "'href = 'javascript: void (0 ); 'title = 'tail' class = 'last'> tail' </a> </li> ");}/* --------------- 4. end: Build the "next page" and "last page" controls ----------- * // bind the Click Event bindEvent () ;}} to the control ();}})( 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. tota LRowSize % 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 all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
Transformation Method of Jquery paging plug-in (server-side paging)
 
  
Asp.net jquery (jquery. pagination. js)
 
  
JQuery Pagination Ajax paging plug-in (no refreshing or delay during paging switching)
 
  
Jquery paging plug-in AmSetPager (self-write)
 
  
Incompatibility of jquery paging plug-in jpaginate in IE
 
  
Pagination plug-in jqPagination for jQuery plug-in sharing
 
  
Jquery + css3 creates an ajax paging plug-in (self-writing)
 
  
Share a self-written jQuery paging plug-in
 
  
Pagination plug-in based on bootstrap3 and jquery