Implement code using ajax paging in jQuery

The example in this article explains the code related to ajax paging in jQuery and shares it with you for your reference. The specific content is as follows

Encapsulate paging into a jsp, then you can introduce the paging page through include and name it page_ajax.jsp
After I encapsulate it, the user needs to introduce page_ajax.jsp into the page, and when querying the list, click the button to call a custom method, such as myFunction() . In this method, call your own extension jquer method, $.pageAjax(url,functionName,showDIv);
The url here is the ajax url you want to request, functionName is the method you use to get the callback data and then process the string to dynamically assign values to the tbody, and showDIv is the div you hide.
Just write it like this:

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

Copy after login

productMessageDiv: This is the div you hide in advance 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=" 确定 " onclick="submitProductMessage();"/> 
     <input type="button" value=" 取消 " onclick="closeProduct();"/> 
     <input type="button" value=" 查询 " 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="%">产品编码</td> 
     <td width="%">产品名称</td> 
     <td width="%">产品型号</td> 
     <td width="%">产品品牌</td> 
     <td width="%">产品分类</td> 
     <td width="%">供应商</td> 
     <td width="%">产品规格</td> 
     </tr> 
    </thead> 
    <tbody id="msgContent"> 
     
    </tbody> 
    </table> 
   </div> 
  </div>

Copy after login

showList is the method you call to get the callback data:

function showList(data){ 
 var list=data.list; 
  var str; 
  if(list==""||list==null){ 
  str="<tr><td colspan=\"9\"><span class=\"tip\">系统无纪录!</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'>产品名称</option><option value='productCode'>产品编号</option>"); 
  $("#msgContent").empty(); 
  $("#msgContent").append(str); 
 }

Copy after login

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 &#63; 
   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 = /^\+&#63;[1-9][0-9]*$/; 
 if(!patrn.exec(pointedPageNum)){ 
 alert('页数请输入正整数'); 
 return; 
 } 
 if(parseInt(pointedPageNum) > parseInt($('#totalPage').html())){ 
 alert('输入页数不得超过最大页数'); 
 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){ //如果页数比总页数小，则下一页和末页能用 
 $("#nextPage").removeAttr("disabled"); 
 $("#lastPage").removeAttr("disabled"); 
 if($("#forwardPageNum").val() >1){ //如果页数大于1，说明 1<页数<总页数 说明全部都可用 
  $("#firstPage").removeAttr("disabled"); 
  $("#beforePage").removeAttr("disabled"); 
 }else{     //在页数比总页数小的其他情况下，就只存在一种就是等于1 
  $("#firstPage").attr("disabled","disabled"); //当等于1 的时候，首页和上一页不可用 
  $("#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]+"'>默认条数</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=" 首页 " type="button" onclick="changePage('first')"/> 
 <input id="beforePage" value=" 上一页 " 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=" 下一页 " type="button" onclick="changePage('next')"/> 
 <input id="lastPage" value=" 末页 " type="button" onclick="changePage('last')"/> 
 共<span id="totalCount"></span>条 
 <span> 
 <select id="pageRows" name="pageRequest.rows" onchange="changeRows()"></select> 
 </span> 
</div>

Copy after login

Understand that the ajax request is to refresh your specific department, this is where I went wrong in the first place. In fact, when doing paging, the value passed to the background is only the current page and the number of displays on each page, nothing else. The paging button and the list below are separated, and there is no need to contact them. This can simplify the problem. Time is limited, so just look at the code carefully.

For more information, please refer to the topic: "JQuery Pagination Function Operation"

The above is the entire content of this article. I hope it will be helpful to everyone in learning jquery programming.