Implémenter le code en utilisant la pagination ajax dans jQuery_jquery

L'exemple de cet article explique le code lié à la pagination ajax dans jQuery et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

Encapsulez la pagination dans un jsp, vous pouvez ensuite introduire la page de pagination via include et la nommer page_ajax.jsp
Après l'avoir encapsulé, l'utilisateur doit introduire page_ajax.jsp dans la page et, lors de l'interrogation de la liste, cliquer sur le bouton pour appeler une méthode personnalisée, telle que myFunction() Dans cette méthode, appelez votre. propre méthode jquer d'extension, $.pageAjax(url,functionName,showDIv);
L'URL ici est l'URL ajax que vous souhaitez demander, functionName est la méthode que vous utilisez pour obtenir les données de rappel, puis traiter la chaîne pour attribuer dynamiquement des valeurs au tbody, et showDIv est le div que vous cachez.
Écrivez-le simplement comme ceci :

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

productMessageDiv : Il s'agit du div que vous masquez à l'avance comme suit :

<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> 

showList est la méthode que vous appelez pour obtenir les données de rappel :

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); 
 } 

Les choses les plus compliquées sont dans 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('页数请输入正整数'); 
 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> 

Comprenez que la requête ajax consiste à actualiser votre service spécifique, c'est là que je me suis trompé en premier lieu. En fait, lors de la pagination, la valeur passée en arrière-plan est uniquement la page actuelle et le nombre d'affichages sur chaque page, rien d'autre. Le bouton de pagination et la liste ci-dessous sont séparés, et il n'est pas nécessaire de les contacter. peut simplifier le problème. Le temps est limité, alors regardez attentivement le code.

Pour plus d'informations, veuillez vous référer au sujet : "Opération de la fonction de pagination JQuery"

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation jquery.