AJAX 페이징 효과의 간단한 구현에 대한 자세한 설명-JS 튜토리얼-php.cn

AJAX 페이징 효과의 간단한 구현에 대한 자세한 설명

小云云

풀어 주다： 2017-12-19 14:11:40

원래의

3222명이 탐색했습니다.

최근에 사용자 그룹에 역할을 추가하는 기능을 작성했는데, 한쪽에는 추가되지 않은 역할이 필요하고 다른 쪽에는 추가된 역할이 필요하며, 추가를 클릭하면 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=&#39;odd gradeX&#39;><td>"+result[i].name+"</td>"
   +"<td>"+result[i].remark+"</td>"
   +"<td><button type=&#39;button&#39; class=&#39;btn btn-xs btn-info m-r-5&#39; onclick=&#39;to_RemoveRoleToGroup("+result[i].roleId+");&#39;>移除</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(&#39;class&#39;,&#39;disabled&#39;); 
   }
   if(page1 == i){
   a+="<li class=&#39;active&#39; bs1=&#39;" + i + "&#39;><a>"+i+"</a></li>";
   }else{
   a+="<li class=&#39;zhong1&#39; bs1=&#39;" + i + "&#39;><a href=&#39;javascript:void(0);&#39; onclick=&#39;a_method("+i+");&#39; >"+i+"</a></li>";
   }

  }
  }

  $("#fy_list").html(a);
  }

 });

 }
 //中间页 
 function a_method(i) {
  page1 = i;
  currentRole(); // 当前角色
  currentRolePage();//当前角色分页
 }

//查询操作
function currentRoleCheck(){
 page1=1;
 currentRole(); // 当前角色
 currentRolePage();//当前角色分页
 }

로그인 후 복사

HTML 코드는 다음과 같습니다. 다음과 같습니다:

<!-- 两个相同的p 下面只是一个-->
<p class="panel-body col-md-6">
 <p style="border: 1px solid #E0E0E0;border-radius: 4px">
 <p class="panel-heading " style="background-color:#E0E0E0; ">

  <h2 class="panel-title"><b>已选角色</b></h2>
 </p>
 <p id="firstCheck" class="panel-body">
   <p style="padding-left: 0 !important;" id="firstCheck" class="panel-body">
    <form class="form-inline" method="POST" >
    <p class="form-group m-r-10">
     <input id="currentRoleCheckName" type="text" class="form-control" placeholder="角色名称" name="fname" maxlength="40" />
    </p>
  <p class="checkbox m-r-10">
   </p>
 <button id="currentCheck"type="button" class="btn btn-sm btn-primary m-r-5" onclick="currentRoleCheck()" >查询</button>
  </form>
   </p>
   <p >
   <table id=&#39;data-table&#39; class=&#39;table table-bordered&#39; >
   <thead>
     <tr>
     <th>角色名称</th>
     <th>备注信息</th>
     <th>操作</th>
     </tr> 
   </thead>
   <tbody id="currentRole">
    <!--
    当前用户组已有角色list
   -->

   </tbody>
   </table>
   </p>
    <p class="buttonBox">

    <p align="right">
    <ul id="fy_list" class="pagination pagination-sm m-t-0 m-b-10 ">

    </ul>
    </p> 
    </p> 

  </p>

 </p>
</p>

로그인 후 복사