AJAX实现分页及动态增删操作

来源：互联网发布：初学者学化妆知乎编辑：程序博客网时间：2024/06/01 16:36

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+="<tr class='odd gradeX'><td>"+result[i].name+"</td>"                       +"<td>"+result[i].remark+"</td>"                        +"<td><button type='button' class='btn btn-xs btn-info m-r-5' onclick='to_RemoveRoleToGroup("+result[i].roleId+");'>移除</button></td></tr>";            }                $("#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+="<li class='active' bs1='" + i + "'><a>"+i+"</a></li>";                    }else{                        a+="<li class='zhong1' bs1='" + i + "'><a href='javascript:void(0);' onclick='a_method("+i+");' >"+i+"</a></li>";                    }                }            }            $("#fy_list").html(a);            }        });        }        //中间页           function a_method(i) {            page1 = i;            currentRole(); // 当前角色            currentRolePage();//当前角色分页        }//查询操作function currentRoleCheck(){        page1=1;        currentRole(); // 当前角色        currentRolePage();//当前角色分页    }

HTML代码如下:

<!-- 两个相同的DIV 下面只贴出来一个--><div class="panel-body col-md-6">                                <div style="border: 1px solid #E0E0E0;border-radius: 4px">                                <div class="panel-heading " style="background-color:#E0E0E0; ">                            <h2 class="panel-title"><b>已选角色</b></h2>                        </div>                            <div  id="firstCheck" class="panel-body">                                <div style="padding-left: 0 !important;" id="firstCheck" class="panel-body">                            <form class="form-inline"  method="POST" >                                <div class="form-group m-r-10">                                    <input id="currentRoleCheckName" type="text" class="form-control" placeholder="角色名称" name="fname" maxlength="40" />                                </div>                                <div class="checkbox m-r-10">                                </div>                                <button id="currentCheck"type="button" class="btn btn-sm btn-primary m-r-5" onclick="currentRoleCheck()" >查询</button>                            </form>                        </div>                        <div >                        <table id='data-table' class='table table-bordered' >                        <thead>                                  <tr>                                        <th>角色名称</th>                                        <th>备注信息</th>                                        <th>操作</th>                                    </tr>                          </thead>                        <tbody id="currentRole">                         <!--                            当前用户组已有角色list                        -->                        </tbody>                        </table>                        </div>                            <div class="buttonBox">                            <div align="right">                               <ul id="fy_list" class="pagination pagination-sm m-t-0 m-b-10  ">                                </ul>                            </div>                              </div>                  </div>                </div>                        </div>

并没有什么难点,这两套ajax开发和一套ajax难度没啥区别,就是比较复杂容易晕,变量名不要搞混就OK了

阅读全文

0 0