这次给大家带来使用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; i0 && i<=totalPage){ if(i == 1){ $("#prev1").attr('class','disabled'); } if(page1 == i){ a+="登录后复制
HTML代码如下:
已选角色
| 角色名称 | 备注信息 | 操作 |
|---|
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Ajax+php怎么进行数据交互与局部页面的刷新
HTTP的报文与ajax基础知识详解
以上就是使用AJAX实现分页功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2777001.html
