最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,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代码如下:
已选角色
查询
角色名称备注信息操作
相关推荐：
