AJAX 페이징 효과 구현 방법

이번에는 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+="<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>

나는 당신이 가지고 있다고 믿습니다 이 기사의 사례를 읽은 후 방법을 마스터했습니다. 더 흥미로운 내용에 주목하세요. PHP 중국어 웹사이트의 기타 관련 기사!

추천 자료:

AJAX를 사용하여 페이징 기능 구현

Ajax를 사용하여 목록 및 보조 드롭다운 메뉴 옵션의 무한 로드 구현(코드 포함)

위 내용은 AJAX 페이징 효과 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!