So implementieren Sie den AJAX-Paging-Effekt

Dieses Mal zeige ich Ihnen, wie Sie den AJAX-Paging-Effekt implementieren und welche Vorsichtsmaßnahmen es gibt, um den AJAX-Paging-Effekt zu implementieren. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ich habe kürzlich eine Funktion zum Hinzufügen von Rollen zu Benutzergruppen geschrieben. Sie erfordert nicht hinzugefügte Rollen auf der einen und hinzugefügte Rollen auf der anderen Seite sowie eine Suchfunktion. Nach dem Klicken auf „Hinzufügen“ speichert Ajax den Vorgang.

Betrachten Sie die Funktion als Paging für die Abfragefunktion. Die Paging-Leiste unten enthält insgesamt 2*2, 4 Ajax...

Der JS-Code lautet wie folgt:

$(document).ready(function() {
  App.init();
  currentRole(); // 当前角色
  currentRolePage();//当前角色分页
  noAddRole(); //未添加角色
  noAddRolePage();//未添加角色分页
 });
//当前角色列表
function currentRole(){
  var currentRoleCheckName =$("#currentRoleCheckName").val();
  // 当前角色的list集合
  $.ajax({
  async:true, 
  type:"POST", 
  //date:"groupId=rose",//发送到服务器的数据
  url:"${ctx}/group/ajax_showRolesForGroup.do",//请求路径
  data:{"groupId":groupId, 
  "page":page1,
  "checkName":currentRoleCheckName
  },
  dataType:"json", //返回数据的类型
  success:function(data){ //成功响应后的回调函数
  var result =data.pageSupport.items;
  console.log(data.pageSupport)
  var s="";
  for(var i in result){ 
   s+="<tr class=&#39;odd gradeX&#39;><td>"+result[i].name+"</td>"
   +"<td>"+result[i].remark+"</td>"
   +"<td><button type=&#39;button&#39; class=&#39;btn btn-xs btn-info m-r-5&#39; onclick=&#39;to_RemoveRoleToGroup("+result[i].roleId+");&#39;>移除</button></td></tr>";
  }
  $("#currentRole").html(s);
  }
 });
 }
//当前角色的分页
 function currentRolePage(){
  var currentRoleCheckName =$("#currentRoleCheckName").val();
  var totalPage=0;
  $.ajax({
  async:true, 
  type:"POST", 
  //date:"groupId=rose",//发送到服务器的数据
  url:"${ctx}/group/ajax_showRolesForGroup.do",//请求路径
  data:{"groupId":groupId, 
  "page":page1,
  "checkName":currentRoleCheckName
  },
  dataType:"json", //返回数据的类型
  success:function(data){ //成功响应后的回调函数
  totalPage=data.pageSupport.last;
  console.log(totalPage)
  var i= 0;
  var a="";
  for( i=page1-2; i<=page1+2;i++){
  if(i>0 && i<=totalPage){
   if(i == 1){
   $("#prev1").attr(&#39;class&#39;,&#39;disabled&#39;); 
   }
   if(page1 == i){
   a+="<li class=&#39;active&#39; bs1=&#39;" + i + "&#39;><a>"+i+"</a></li>";
   }else{
   a+="<li class=&#39;zhong1&#39; bs1=&#39;" + i + "&#39;><a href=&#39;javascript:void(0);&#39; onclick=&#39;a_method("+i+");&#39; >"+i+"</a></li>";
   }
  }
  }
  $("#fy_list").html(a);
  }
 });
 }
 //中间页 
 function a_method(i) {
  page1 = i;
  currentRole(); // 当前角色
  currentRolePage();//当前角色分页
 }
//查询操作
function currentRoleCheck(){
 page1=1;
 currentRole(); // 当前角色
 currentRolePage();//当前角色分页
 }

Der HTML-Code lautet wie folgt:

<!-- 两个相同的p 下面只是一个-->
<p class="panel-body col-md-6">
 <p style="border: 1px solid #E0E0E0;border-radius: 4px">
 <p class="panel-heading " style="background-color:#E0E0E0; ">
  <h2 class="panel-title"><b>已选角色</b></h2>
 </p>
 <p id="firstCheck" class="panel-body">
   <p style="padding-left: 0 !important;" id="firstCheck" class="panel-body">
    <form class="form-inline" method="POST" >
    <p class="form-group m-r-10">
     <input id="currentRoleCheckName" type="text" class="form-control" placeholder="角色名称" name="fname" maxlength="40" />
    </p>
  <p class="checkbox m-r-10">
   </p>
 <button id="currentCheck"type="button" class="btn btn-sm btn-primary m-r-5" onclick="currentRoleCheck()" >查询</button>
  </form>
   </p>
   <p >
   <table id=&#39;data-table&#39; class=&#39;table table-bordered&#39; >
   <thead>
     <tr>
     <th>角色名称</th>
     <th>备注信息</th>
     <th>操作</th>
     </tr> 
   </thead>
   <tbody id="currentRole">
    <!--
    当前用户组已有角色list
   -->
   </tbody>
   </table>
   </p>
    <p class="buttonBox">
    <p align="right">
    <ul id="fy_list" class="pagination pagination-sm m-t-0 m-b-10 ">
    </ul>
    </p> 
    </p> 
  </p>
 </p>
</p>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwendung von AJAX zur Implementierung der Paging-Funktion

Ajax zur Implementierung des unendlichen Ladens von Listen und sekundären Drop- Abwärtsmenüoptionen (mit Code)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den AJAX-Paging-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!