Implement code _jquery with Ajax paging in jquery

This article illustrates the use of jquery in the Ajax pagination related code, share for everyone to refer to, the specific content as follows

To encapsulate pagination in a JSP, you can introduce pagination pages in the form of include page_ajax.jsp
I encapsulate, the user needs to introduce page_ajax.jsp in the page, and in the query list, click on the button, call the custom method, such as MyFunction (), in this method, call their own extended Jquer method,$. Pageajax (URL,FUNCTIONNAME,SHOWDIV);
The URL here is the Ajax url,functionname you want to request for you to get the callback data to handle the Tbody dynamic assignment, and Showdiv is your hidden div.
That is to say:

function Pageajax () { 
 var url= "${ctx}/system/conproductinfo/listofajax.action"; 
 $.pageajax (URL, "Productmessagediv", "showlist"); 
 } 

Productmessagediv: This is your hidden div as follows:

<div style= "Display:none;" > <div id= "productmessagediv" class= "Showparentdiv" style= "width:950px;height:400px" > <div id= "ShowProdu" Ctlistmsg "> <div class=" GRAYBG "> <div id=" toolbarscroll "> <span> <input type=" Button "value=" determines "onclick=" submitproductmessage (); /> <input type= "button" value= "Cancel" onclick= "closeproduct ();" /> <input type= "button" value= "Query" onclick= "selectproduct ();"/> <input id= "value" name= "value" Type= "text" class= "width_132"/> <select id= "key" Name= "key" class= "width_115" > </select> & lt;/span> </div> <div class= page id= "page" > <jsp:include page= "/portal/common/page/page_" ajax.jsp "/> </div> <div class=" clearfloat "></div> </div> <div class=" Scrollin Fo "> <div class=" tableinfo "style=" overflow-y:scroll; height:365px; " > <table id= "dragtablE "border=" 0 "cellpadding=" 0 "cellspacing=" 0 "id=" listtable "> <thead> <tr> <td width=" 4 % "> <input type=" checkbox "id=" Selectallcheckbox "onclick=" Selectlistall (); " /> </td> <td width= "%" > Product code </td> &LT;TD width= "%" > Product name </td> <td W Idth= "%" > product model </td> <td width= "%" > product brand </td> <td width= "%" > Product category </td> < TD width= "%" > Supplier </td> <td width= "%" > Product specification </td> </tr> </thead> &LT;TB  Ody id= "Msgcontent" > </tbody> </table> </div> </div>

Showlist This is the way you get callback data calls:

 function showlist (data) {var list=data.list; 
  var str; if (list== "" | | List==null) {str= "<tr><td colspan=\" 9\ "><span class=\" tip\ "> System no record!</span></td></   
  Tr> "; }else{for (Var i=0;i<list.length;i++) {str=str+ "<tr id=\" contenttr "+i+" \ "><td><input name=\" Selec Tids\ "type=\" checkbox\ "value=\" "+list[i].id+" \ "/></td><td>" +list[i].productcode+ "</td> <td> "+list[i].productname+" </td><td> "+list[i].producttype+" </td><td> "+list[i". Brandname+ "</td><td>" +list[i].typename+ "</td><td>" +list[i].companyshortname+ "</td 
  ><td> "+list[i].productcode+" </td></tr>; } if ($ (' #key '). val () = "" | | $ (' #key '). Val () ==null) $ (' #key '). Append ("<option value= ' productName ' > Product name </option><option value= ') 
  ProductCode ' > Product No. </option> '); 
  $ ("#msgContent"). empty (); 
 $ ("#msgContent"). Append (str); } 

Something complex is in the page_ajax.jsp.

var Ajaxurl; 
var showdivname; 
var ajaxfunctionname; 
 Jquery.extend ({pageajax:function (url,div,functionname) {ajaxurl=url; 
 Showdivname=div; 
 Ajaxfunctionname=functionname; $.ajax ({url:url, data:{"Pagerequest.page": $ (' #pagePage '). Val (), "Pagerequest.rows": $ (' #pageRows '). Val ()}, Datatyp 
  E: "JSON", success:function (data) {eval (functionname+ "(data)"); 
  $.changepageajax (data); 
  Showwin (DIV); 
 } 
 }); }, Pageajaxofparam:function (Url,div,functionname,key,value) {$.ajax ({url:url, data:{"Pagerequest.page": $ (' #pag Epage '). Val (), "Pagerequest.rows": $ (' #pageRows '). Val (), "key": Key, "value": Value}, DataType: "JSON", success: 
  function (data) {eval (functionname+ "(data)"); 
  $.changepageajax (data); 
  Showwin (DIV); 
 } 
 }); 
 }, Changepageajax:function (data) {var totalcount = Data.totalcount; 
 Changedefaultrows (data); 
   var PageCount = totalcount% parseint ($ ("#pageRows"). val () = = 0? parseint (Totalcount/parseint ("#pageRows"). Val ()): parseint (Totalcount/parseint ($ ("#pageRows"). Val ()) +1; 
 $ ("#totalPage"). html (pagecount+ '); 
 $ ("#totalCount"). html (totalcount+ '); 
 Changebutton (PageCount); 
 
} 
}); 
 function Changepage (pagetitle) {if (PageTitle = "Previous") {$ (' #pagePage '). Val (parseint ($ (' #pagePage '). Val ())-1); 
 }else if (pagetitle = = "Next") {$ (' #pagePage '). Val (parseint (' #pagePage '). Val ()) + 1); 
 }else if (pagetitle = = "a") {$ (' #pagePage '). val (1); 
 }else if (pagetitle = = "Last") {var totalcount = parseint ($ (' #totalCount '). html ()); 
 $ (' #pagePage '). Val (parseint (totalCount-1)/parseint ($ (' #pageRows '). Val ()) + "+ 1); 
Go (); 
 function Gotopointedpage () {var pointedpagenum = $ (' #forwardPageNum '). Val (); var patrn =/^\+? [1-9] 
 [0-9]*$/; 
 if (!patrn.exec (pointedpagenum)) {alert (' Number of pages please enter a positive integer '); 
 Return 
 } if (parseint (pointedpagenum) > parseint ($ (' #totalPage '). html ())) {alert (' input pages cannot exceed maximum pages '); 
 Return 
 } $ (' #pagePage '). Val (parseint (Pointedpagenum)); 
Go (); }
 
function Changebutton (PageCount) {$ (' #forwardPageNum '). Val ($ (' #pagePage '). Val ()); 
 if (PageCount = = 1) {$ ("#beforePage"). attr ("Disabled", "disabled"); 
 $ ("#firstPage"). attr ("Disabled", "disabled"); 
 $ ("#nextPage"). attr ("Disabled", "disabled"); 
 $ ("#lastPage"). attr ("Disabled", "disabled"); 
 }else if ($ ("#forwardPageNum"). Val () < PageCount) {//If the number of pages is smaller than the total number of pages, the next and last page can use $ ("#nextPage"). Removeattr ("Disabled"); 
 $ ("#lastPage"). Removeattr ("Disabled"); 
  if ($ ("#forwardPageNum"). Val () >1) {//If the page number is greater than 1, the 1< page < Total page description is available in $ ("#firstPage"). Removeattr ("Disabled"); 
 $ ("#beforePage"). Removeattr ("Disabled"); }else{//In other cases where the number of pages is smaller than the total number of pages, there is only one that is equal to 1 $ ("#firstPage"). attr ("Disabled", "disabled");//when equal to 1, the first and last page is not available $ ("#before 
 Page "). attr (" Disabled "," disabled "); 
 } else{$ ("#beforePage"). Removeattr ("Disabled"); 
 $ ("#firstPage"). Removeattr ("Disabled"); 
 $ ("#nextPage"). attr ("Disabled", "disabled"); 
 $ ("#lastPage"). attr ("Disabled", "disabled"); }} function ChangedefaulTrows (data) {if ($ ("#pageRows"). Val () ==null| | 
 $ ("#pageRows"). val () = "") {$ ("#pageRows"). empty (); $ ("#pageRows"). Append ("<option value=" "+data.pagesizes[0]+" ' > Default bar number </option><option value= ' "+ data.pagesizes[1]+ "' >" +data.pagesizes[1]+ "</option><option value= '" +data.pagesizes[2]+ "' >" + 
 data.pagesizes[2]+ "</option>"); 
 }} function Changerows () {$ (' #pagePage '). val (1); 
Go (); 
function Go () {$.pageajax (ajaxurl,showdivname,ajaxfunctionname); 
function Clearpageinfo () {$ ("#pagePage"). Val (' 1 '); 
 } $ (function () {$ ("body"). KeyDown (function (event) {if (Event.keycode = =) {gotopointedpage (); 
} 
 }); 
 
}); </script> <div class= "Toolbarscroll" > <s:hidden name= "pagerequest.page" id= "pagepage"/> <input i D= "FirstPage" value= "Home" type= "button" onclick= "Changepage (' first ')"/> <input id= "Beforepage" value= "Previous page" type = "button" onclick= "Changepage (' previous ')"/> <input size= "6" maxlength= "3" ID= "Forwardpagenum" class= "Formstylepage" onblur= "Gotopointedpage" () "value=" "type=" text "style=" Text-align:center; " />/<span class= "currentpage" id= "Totalpage" > </span> <input id= "NextPage" value= "next page" type= "but Ton "onclick=" Changepage (' Next ') "/> <input id=" lastpage "value=" End "type=" button "onclick=" Changepage (' last ') " /> Total <span id= "TotalCount" ></span> strip <span> <select id= "pagerows" name= "Pagerequest.rows" Onch 
 Ange= "Changerows ()" ></select> </span> </div>

To understand the AJAX request is to refresh your specific department, I started out with a problem here. In fact, when doing pagination, to the background to pass the value, just the current page and the number of each page display, the other is gone, the page button and the bottom of the list is separate, do not need to contact, this can make the problem simple. Time is limited so, look at the code carefully.

For more information please refer to the topic:jquery paging feature operations

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