Use ajax paging in jQuery to implement code _ jquery

This article describes how to use ajax paging in jQuery to implement code. If you are interested in ajax paging, refer to the example in this article and explain how to use ajax paging code in jQuery, the content is as follows:

Encapsulate pagination into a jsp, so you can introduce pagination pages by using the include method. The name is page_ajax.jsp.
After encapsulation, the user needs to introduce page_ajax.jsp to the page, and when querying the list, click the button to call a custom method, such as myFunction (). In this method, call the self-expanded jquer method, $. pageAjax (url, functionName, showDIv );
The url here is the ajax url You Want To request. functionName is the method for dynamically assigning values to the tbody after processing the callback data. showDIv is the hidden p.
That is, write the following code:

function pageAjax(){  var url="${ctx}/system/conProductInfo/listOfAjax.action";  $.pageAjax(url,"productMessageDiv","showList");  } 

ProductMessageDiv: the pre-hidden p is as follows:

  
   
    
     
                                                   
    
     
      
    
    
   
    
     
 
 
     
  
  
 
   
 
    
  
 
    
Product Code
 
    
Product Name
 
    
Product Model
 
    
Product Brand
 
    
Product Category
 
    
Supplier
 
    
Product Specifications
 
   
 
  
     
  
  
 
  
     
 
 
    
   
 

ShowList: This is the method for calling the callback data:

Function showList (data) {var list = data. list; var str; if (list = "" | list = null) {str ="The system has no records!";}Else {for (var I = 0; I
 
  "+ List [I]. productCode +""+ List [I]. productName +""+ List [I]. productType +""+ List [I]. brandName +""+ List [I]. typeName +""+ List [I]. companyShortname +""+ List [I]. productCode +"";}} If ($ ('# key '). val () = "" | $ ('# key '). val () = null) $ ('# key '). append ("
  Product Name
  Product NO."); $ (" # MsgContent "). empty (); $ (" # msgContent "). append (str );}
 

Complex things are in page_ajax.jsp.

Var ajaxUrl; var showDivName; var ajaxFunctionName; jQuery. extend ({pageAjax: function (url, p, functionName) {ajaxUrl = url; showDivName = p; ajaxFunctionName = functionName; $. ajax ({url: url, data: {"pageRequest. page ": $ ('# pagepage '). val (), "pageRequest. rows ": $ ('# pageRows '). val ()}, dataType: "json", success: function (data) {eval (functionName + "(data)"); $. changePageAjax (data); showWin (p) ;}}) ;}, pageAjaxOfP Aram: function (url, p, functionName, key, value) {$. ajax ({url: url, data: {"pageRequest. page ": $ ('# pagepage '). val (), "pageRequest. rows ": $ ('# pageRows '). val (), "key": key, "value": value}, dataType: "json", success: function (data) {eval (functionName + "(data) "); $. changePageAjax (data); showWin (p) ;}}) ;}, 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 ($ ('# pagePa Ge '). val () + 1);} else if (pageTitle = "first") {$ ('# 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.exe c (pointedPageNum) {alert ('enter a positive integer in the number of pages '); return;} if (parseInt (pointedPageNum)> parseint({('{totalpage'{.html ())) {alert ('the maximum number of pages allowed to be entered '); 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 pages can use $ ("# nextPage "). removeAttr ("disabled"); $ ("# lastPage "). removeAttr ("disabled"); if ($ ("# forwardPageNum "). val ()> 1) {// if the number of pages is greater than 1, 1
 <页数<总页数 说明全部都可用 $("#firstpage").removeattr("disabled"); $("#beforepage").removeattr("disabled"); }else{ 在页数比总页数小的其他情况下，就只存在一种就是等于1 $("#firstpage").attr("disabled","disabled"); 当等于1 的时候，首页和上一页不可用 $("#beforepage").attr("disabled","disabled"); } else{ $("#nextpage").attr("disabled","disabled"); $("#lastpage").attr("disabled","disabled"); function changedefaultrows(data){ if($("#pagerows").val()="=null||$("#pageRows").val()==""){" $("#pagerows").empty(); $("#pagerows").append("
  
Default number of entries
  "+ Data. pAGESIZES [1] +"
  "+ Data. pAGESIZES [2] +"") ;}} 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 = 13) {goToPointedPage () ;}}) ;}); script
  
  
         /  Total   
 
 

You need to understand that the ajax request is to refresh your specific department. I encountered a problem in the beginning. In fact, when paging is performed, the value is transferred to the background, but the number of displays on the current page and each page is not displayed. The buttons on the page are separated from the list below and do not need to be contacted, this simplifies the problem. Time is limited, so you can read the code carefully.

For more information, see the topic:Jquery paging function operations

The above is all the content of this article, and I hope it will help you learn jquery programming.