Detaillierte Erläuterung der einfachen Implementierung des AJAX-Paging-Effekts

Ich habe kürzlich eine Funktion zum Hinzufügen von Rollen zu Benutzergruppen geschrieben. Sie erfordert auf der einen Seite nicht hinzugefügte Rollen und auf der anderen eine Suchfunktion. Nach dem Klicken auf „Hinzufügen“ wird hauptsächlich der Ajax-Speichervorgang ausgeführt Ich stelle AJAX allen im Detail vor. Der einfache Implementierungscode des Paging-Effekts hat einen gewissen Referenzwert.

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

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

Verwandt Empfehlungen:

PHP-Zusammenfassung zur Implementierung von Ajax-Paging

Ajax-Paging-Code_PHP-Tutorial

PHP-Ajax-Paging einfaches Anwendungsbeispiel_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der einfachen Implementierung des AJAX-Paging-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!