AJAX分页效果简单实现

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

"+i+"

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

 

 


  
已选角色
 
 

   

    

    

     
    
  

   
 查询
  
   
   

   

   

     

     
角色名称
     
备注信息
     
操作
     
 
   
   

    

   
   
   
    


    

    


    
    
 
    
 

  

 

本文是爱站技术频道小编为大家带来的AJAX分页效果简单实现的全部介绍，这只是一部分知识，爱站技术频道还有很多专业知识在更新，希望大家继续支持我们。