Verwendung von AJAX zur Implementierung der Paging-Funktion

Dieses Mal werde ich Ihnen die Paginierungsfunktion mit AJAX vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von AJAX zur Implementierung der Paginierungsfunktion? sehen.

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:

Wie Ajax+php Dateninteraktion durchführt und Teilseiten aktualisiert

HTTP-Nachrichten und detaillierte Erklärung von Ajax-Grundkenntnisse

Das obige ist der detaillierte Inhalt vonVerwendung von AJAX zur Implementierung der Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!