最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,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+="

"+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; i<=page1+2;i++){

if(i>0 && i<=totalPage){

if(i == 1){

$("#prev1").attr('class','disabled');

}

if(page1 == i){

a+="

"+i+"";

}else{

a+="

"+i+"";

}

}

}

$("#fy_list").html(a);

}

});

}

//中间页

function a_method(i) {

page1 = i;

currentRole(); // 当前角色

currentRolePage();//当前角色分页

}

//查询操作

function currentRoleCheck(){

page1=1;

currentRole(); // 当前角色

currentRolePage();//当前角色分页

}

HTML代码如下:

已选角色

查询

角色名称备注信息操作

相关推荐：