使用AJAX實現分頁功能

這次為大家帶來使用AJAX實現分頁功能，使用AJAX實現分頁功能的注意事項有哪些，以下就是實戰案例，一起來看一下。

最近寫一個為使用者群組新增角色的功能,要求一邊是未新增的角色,一邊是已新增的角色,還有搜尋功能, 點擊新增後,ajax儲存動作.

考慮功能為待查詢功能分頁, 下方分頁條, 一共有2*2 ,4個ajax…

JS程式碼如下：

$(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>
<td>"+result[i].name+"</td>"
   +"<td>"+result[i].remark+"</td>"
   +"<td><button>移除</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; i0 && i<a>"+i+"</a>";
   }else{
   a+="

"+i+"

";    }   }   }   $("#fy_list").html(a);   }  });  }  //中间页   function a_method(i) {   page1 = i;   currentRole(); // 当前角色   currentRolePage();//当前角色分页  } //查询操作 function currentRoleCheck(){  page1=1;  currentRole(); // 当前角色  currentRolePage();//当前角色分页  }

HTML程式碼如下:

<!-- 两个相同的p 下面只是一个-->
<p>
 </p><p>
 </p><p>
  </p><h2 id="b-已选角色-b"><b>已选角色</b></h2>
 
 <p>
   </p><p>
    </p>

    

          

  

   

 查询   

       

   

                                                       

角色名称	备注信息	操作

        

    

    

    

                

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Ajax+php怎麼進行資料互動與局部頁面的刷新

HTTP的封包與ajax基礎知識詳解

#

以上是使用AJAX實現分頁功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！