Of Stack

The code is implemented using ajax paging in jQuery

  • 2021-01-06 00:27:31
  • OfStack

This article illustrates the ajax paging code in jQuery, to share with you for your reference, the specific content is as follows

Paging is encapsulated in one jsp, so you can use include to import a paging page called page_ajax.jsp
page_ajax.jsp, and when queryingthe list, click the button to call a custom method, such as myFunction (). In this method, call the extended jquer method, $.pageAjax(url,functionName,showDIv);
url is the url of the requested ajax. functionName will dynamically assign the value to tbody after you get the callback data. showDIv is the hidden div.
I'll just write it like this: 


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

productMessageDiv: Here is your pre-hidden div as follows: 


<div style="display: none;"> 
 <div id="productMessageDiv" class="showParentDiv" style="width:950px;height:400px"> 
  <div id="showProductListMsg"> 
   <div class="grayBg"> 
    <div id="toolbarScroll"> 
    <span> 
     <input type="button" value="  determine  " onclick="submitProductMessage();"/> 
     <input type="button" value="  cancel  " onclick="closeProduct();"/> 
     <input type="button" value="  The query  " onclick="selectProduct();" /> 
     <input id="value" name="value" type="text" class="width_132"/> 
     <select id="key" name="key" class="width_115"> 
     </select> 
    </span> 
    </div> 
   <div class="page" id="page"> 
    <jsp:include page="/portal/common/page/page_ajax.jsp"/> 
   </div> 
   <div class="clearFloat"></div> 
   </div> 
  <div class="scrollInfo"> 
   <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="%"> The product code </td> 
     <td width="%"> The product name </td> 
     <td width="%"> Product model </td> 
     <td width="%"> Product brand </td> 
     <td width="%"> Product categories </td> 
     <td width="%"> supplier </td> 
     <td width="%"> Product specification </td> 
     </tr> 
    </thead> 
    <tbody id="msgContent"> 
     
    </tbody> 
    </table> 
   </div> 
  </div>

ES39en This is how you get the callback data called: 


function showList(data){ 
 var list=data.list; 
  var str; 
  if(list==""||list==null){ 
  str="<tr><td colspan=\"9\"><span class=\"tip\"> No record in the system !</span></td></tr>";   
  }else{ 
  for(var i=0;i<list.length;i++){ 
  str=str+" <tr id=\"contentTr"+i+"\"><td><input name=\"selectIds\" 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'> The product name </option><option value='productCode'> Product number </option>"); 
  $("#msgContent").empty(); 
  $("#msgContent").append(str); 
 }

The more complicated stuff is in 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()}, 
  dataType: "json", 
  success: function(data){ 
  eval(functionName+"(data)"); 
  $.changePageAjax(data); 
  showWin(div); 
  } 
 }); 
 }, 
 pageAjaxOfParam: function(url,div,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(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 == "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.exec(pointedPageNum)){ 
 alert(' Please enter positive integer number of pages '); 
 return; 
 } 
 if(parseInt(pointedPageNum) > parseInt($('#totalPage').html())){ 
 alert(' The number of pages entered must not exceed the maximum number '); 
 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, then 1 Pages and end pages are available  
 $("#nextPage").removeAttr("disabled"); 
 $("#lastPage").removeAttr("disabled"); 
 if($("#forwardPageNum").val() >1){ // If the number of pages is greater than 1 ,  1< Number of pages < Total number of pages   All are available  
  $("#firstPage").removeAttr("disabled"); 
  $("#beforePage").removeAttr("disabled"); 
 }else{     // In other cases where the number of pages is smaller than the total number of pages, only exists 1 The species is equal to 1 
  $("#firstPage").attr("disabled","disabled"); // When is equal to the 1  When the home page and on 1 Page is not available  
  $("#beforePage").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]+"'> The default number of branches </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 == 13){ 
  goToPointedPage(); 
 } 
 }); 
}); 
 
</script> 
<div class="toolbarScroll"> 
 <s:hidden name="pageRequest.page" id="pagePage"/> 
 <input id="firstPage" value="  Home page  " type="button" onclick="changePage('first')"/> 
 <input id="beforePage" value="  on 1 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="  Under the 1 page  " type="button" onclick="changePage('next')"/> 
 <input id="lastPage" value="  At the end of the page  " type="button" onclick="changePage('last')"/> 
  A total of <span id="totalCount"></span> article  
 <span> 
 <select id="pageRows" name="pageRequest.rows" onchange="changeRows()"></select> 
 </span> 
</div>

Be aware that ajax requests to refresh your specific department, I had a problem here from the beginning. In fact, when doing paging, pass the value to the background, just the current page and the number of each page display, the other did not have, the paging button and the list below are separated, do not have to contact, so that can make the problem simple. Time is limited, just look at the code carefully.

For more information, please refer to "jquery Paging Function Operation".

The above is all the content of this article, we hope to learn jquery programming help.

Related articles: