这篇文章主要为大家详细介绍了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; i0 && i"+i+""; }else{ a+="
登录后复制”+i+””; } } } $(“#fy_list”).html(a); } }); } //中间页 function a_method(i) { page1 = i; currentRole(); // 当前角色 currentRolePage();//当前角色分页 }//查询操作function currentRoleCheck(){ page1=1; currentRole(); // 当前角色 currentRolePage();//当前角色分页 }
HTML代码如下:
已选角色
登录后复制
角色名称
备注信息
操作
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
$.ajax()方法怎样从服务器里获取json数据
ajax实现简单实时验证功能
Vue怎么进行ajax请求公共方法
以上就是AJAX分页效果简单实现（图文教程）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759784.html
