• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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>
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • 用jQuery中的ajax分页实现代码
    • JQuery+Ajax无刷新分页的实例代码
    • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
    • Ajax读取数据之分页显示篇实现代码
    • php,ajax实现分页
    • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
    • jQuery DataTables插件自定义Ajax分页实例解析
    • 使用PHP+JQuery+Ajax分页的实现
    • php+ajax实现无刷新分页的方法
    • 基于Jquery+Ajax+Json的高效分页实现代码
    上一篇:详解ajax跨域问题解决方案
    下一篇:使用Ajax或Easyui等框架时的Json-lib的处理方案
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    AJAX分页效果简单实现 AJAX,分页,效果,简单,实现,