这篇文章主要为大家展示了“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+="| "+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代码如下:
已选角色
