Implementieren Sie Code mithilfe von Ajax-Paging in jQuery_jquery

Das Beispiel in diesem Artikel erklärt den Code für Ajax-Paging in jQuery und teilt ihn als Referenz mit Ihnen. Der spezifische Inhalt ist wie folgt

Kapseln Sie Paging in eine JSP. Anschließend können Sie die Paging-Seite über include einführen und page_ajax.jsp nennen.
Nachdem ich es gekapselt habe, muss der Benutzer page_ajax.jsp in die Seite einführen und beim Abfragen der Liste auf die Schaltfläche klicken, um eine benutzerdefinierte Methode aufzurufen, z. B. myFunction() . Rufen Sie in dieser Methode Ihre auf eigene Erweiterungs-Jquer-Methode, $.pageAjax(url,functionName,showDIv);
Die URL hier ist die Ajax-URL, die Sie anfordern möchten, functionName ist die Methode, mit der Sie die Rückrufdaten abrufen und dann die Zeichenfolge verarbeiten, um dem Tbody dynamisch Werte zuzuweisen, und showDIv ist das Div, das Sie ausblenden.
Schreiben Sie es einfach so:

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

productMessageDiv: Dies ist das Div, das Sie im Voraus wie folgt ausblenden:

<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 ist die Methode, die Sie aufrufen, um die Rückrufdaten abzurufen:

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

Das kompliziertere Zeug ist 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('页数请输入正整数'); 
 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> 

Verstehen Sie, dass die Ajax-Anfrage dazu dient, Ihre spezifische Abteilung zu aktualisieren. Hier habe ich überhaupt einen Fehler gemacht. Tatsächlich ist der an den Hintergrund übergebene Wert nur die aktuelle Seite und die Anzahl der Anzeigen auf jeder Seite, nichts anderes. Die Paging-Schaltfläche und die Liste unten sind getrennt, und es besteht keine Notwendigkeit, sie zu kontaktieren kann das Problem vereinfachen. Die Zeit ist begrenzt, also schauen Sie sich den Code genau an.

Weitere Informationen finden Sie im Thema: "JQuery Pagination Function Operation"

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der JQuery-Programmierung hilfreich ist.