JQuery를 사용하여 간단한 비동기 페이징 플러그인

집

웹 프론트엔드

JS 튜토리얼

JQuery를 사용하여 간단한 비동기 페이징 플러그인_jquery 작성

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:11 PM

Jquery 비동기 페이징 플러그인을 작성하여 공유했는데, 불완전한 부분이 있으면 알려주세요.
사용자 페이징을 예로 들어 먼저 효과를 살펴보겠습니다.

다음 페이지 또는 두 번째 페이지 클릭 후:

마지막 페이지 클릭 후:

효과 괜찮나요? 사용 방법을 살펴보겠습니다. 먼저 배경에 페이지 모델이 있어야 합니다.
Page.java：

public class Page { 
  
 /** 
  * 当前页号 
  */ 
 private int currPageNum = 1; 
  
  
 /** 
  * 总记录数 
  */ 
 private int totalRowSize = 0; 
  
 /** 
  * 每页记录数 
  */ 
 private int pageRowSize = 10; 
  
 public int getCurrPageNum() { 
  return currPageNum; 
 } 
 
 public void setCurrPageNum(int currPageNum) { 
  this.currPageNum = currPageNum; 
 } 
 
 public int getTotalPageNum() { 
  int total = (totalRowSize%pageRowSize==0)&#63;(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1); 
  return total; 
 } 
 
 public int getTotalRowSize() { 
  return totalRowSize; 
 } 
 
 public void setTotalRowSize(int totalRowSize) { 
  this.totalRowSize = totalRowSize; 
 } 
 
 public int getPageRowSize() { 
  return pageRowSize; 
 } 
 
 public void setPageRowSize(int pageRowSize) { 
  this.pageRowSize = pageRowSize; 
 } 
 
 public int getFirstResult(){ 
  if(getCurrPageNum()<=0) return 0; 
   
  return getPageRowSize() * (getCurrPageNum() - 1); 
 } 
 
 public int getMaxResult() { 
  return this.getFirstResult()+this.getPageRowSize(); 
 } 
  
}

그런 다음 list_user.jsp를 살펴보세요.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <title>异步分页</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <link href="../css/local.css" rel="stylesheet" type="text/css" /> 
 <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="../js/asyn_page.js"></script> 
 <script type="text/javascript"> 
 var totalRowSize = ${totalRowSize}; 
 $(document).ready(function(){ 
  $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize); 
 }); 
  
 //构建内容 
 function buildHtml(users){ 
  $.each(users,function(i,user){ 
   var tr = [ 
    '<tr>', 
     '<td>',user.userId,'</td>', 
     '<td>',user.username,'</td>', 
     '<td>',user.sex,'</td>', 
     '<td>',user.age,'</td>', 
     '<td>',user.email,'</td>', 
     '<td>',user.address,'</td>', 
     '<td>',user.registerTime,'</td>', 
     '<td></td>', 
    '</tr>' 
   ].join(''); 
   $("#tbody").append(tr); 
  }); 
 } 
 </script> 
 </head> 
 <body> 
 <table> 
  <thead> 
  <tr> 
   <th>ID</th> 
   <th>用户名</th> 
   <th>性别</th> 
   <th>年龄</th> 
   <th>Email</th> 
   <th>地址</th> 
   <th>注册时间</th> 
   <th>操作</th> 
  </tr> 
  </thead> 
  <tbody id="tbody"></tbody> 
 </table> 
 <div id="pageWidget" class="page"></div> 
 </body> 
</html>

id가 tbody인 요소가 페이징 콘텐츠 표시 컨테이너로 사용되고, id가 pageWidget인 요소가 페이징 제어 표시 컨테이너로 사용되는 것을 볼 수 있습니다.
그런 다음 페이징 콘텐츠를 구체적으로 빌드하기 위해 buildHtml() 함수가 제공됩니다.
비동기 페이징 플러그인을 사용하는 것은 매우 간단합니다. 다음과 같이 호출하면 됩니다.

$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);

가장 간단한 호출입니다. 추가 쿼리 매개변수를 전달하고 각 페이지에 표시되는 레코드 수를 사용자 정의할 수도 있습니다. 구체적인 사용법은 플러그인의 자세한 소개를 참조하세요.
다음은 asynPage 플러그인의 내용입니다.

/* 
 * ===================AJAX异步分页================= 
 * 
 * Copyright 2012 8 23, zhutx 
 * 
 * 假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用： 
 * $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10}); 
 * 参数说明： 
 * ------------Required----------- 
 * 参数一：请求URL 
 * 参数二：渲染结果集的页面容器 
 * 参数三：负责渲染结果集到页面的函数 
 * 参数四：总记录数 
 * ------------Optional----------- 
 * 参数五(json对象)： 
 * 属性pageRowSize:每页记录数(不配置，则默认为20) 
 * 属性param:请求参数(json格式) 
 */ 
(function($){ 
 var settings; 
 var page; 
 var paramStr; 
  
 $.fn.asynPage = function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){ 
  
  settings = $.extend({ 
   currPageNum:1, 
   pageRowSize:20, 
   param:null 
  },callerSettings||{}); 
  
  settings.contentContainer = $(contentContainer); 
  settings.url = url; 
  settings.pageWidget = this; 
  settings.totalRowSize = totalRowSize; 
  settings.buildHtml_fun = buildHtml_fun; 
   
  page = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize); 
   
  paramStr = makeParamStr(settings.param); 
   
  //开始获取数据 
  fetchData(page.getCurrPageNum()); 
   
  return this; 
 }; 
  
 /* 将json转换为请求参数字符串 */ 
 var trunParamConfig2RequestParamStr = function(json){ 
  var str = ""; 
  for(key in json){ 
   if(str==""){ 
    str += key+"="+json[key]; 
   }else{ 
    str += "&"+key+"="+json[key]; 
   } 
  } 
  return str; 
 }; 
  
 /* 将配置参数拼接为请求字符串 */ 
 var makeParamStr = function(param_json){ 
  if(param_json==null){ 
   return ""; 
  }else{ 
   return trunParamConfig2RequestParamStr(param_json); 
  } 
 }; 
  
 /* 
  * 负责获取后台数据，获取完毕后会触发构建分页控件 
  */ 
 var fetchData = function(currPageNum){ 
   
  page.setCurrPageNum(currPageNum); 
  var firstResult = page.getFirstResult(); 
  var maxResult = page.getMaxResult(); 
  var pageRowSize = page.getPageRowSize(); 
   
  var data = null; 
  if(paramStr){ 
   data = paramStr + "&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult; 
  }else{ 
   data = "page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult; 
  } 
   
  $.ajax({ 
   type :"POST", 
   url : settings.url, 
   data :data, 
   success :function(datas){ 
    settings.contentContainer.empty(); 
    settings.buildHtml_fun(datas); 
    buildPageWidget(page);//触发构建分页控件 
   }, 
   error:function(xmlHttpRequest,textStatus,errorThrown){ 
    if(textStatus == "error"){ 
     var error = eval('('+xmlHttpRequest.responseText+')'); 
     alert("Sorry："+error.errorCode+"，"+error.message+"！"); 
    } 
   } 
  }); 
 }; 
  
 var trunTargetPage = function(pageNum){ 
  fetchData(pageNum); 
 } 
  
 /* 为分页控件绑定事件 */ 
 var bindEvent = function(){ 
  var links = settings.pageWidget.find("a"); 
  $.each(links,function(i,link){ 
   var link = $(link); 
   var pageNum = link.attr("pageNum"); 
   link.click(function(){ 
    trunTargetPage(pageNum); 
   }); 
  }); 
 } 
  
 /* 构建分页控件的具体算法实现 */ 
 var buildPageWidget = function(page){ 
   
  //构建分页控件前，先清理现有控件 
  settings.pageWidget.empty(); 
   
  /* --------------- 下面开始进入真正的分页控件构建过程 -------------- */ 
   
  /* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */ 
  settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>"); 
  settings.pageWidget.append("<ul>"); 
  /* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */ 
   
  /* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */ 
  var currPageNum = Number(page.getCurrPageNum()); 
  var totalPageNum = Number(page.getTotalPageNum()); 
   
  if(currPageNum==1){ 
   //如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充 
  }else{ 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>"); 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>"); 
  } 
  /* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */ 
   
  /* --------------- 3.开始：构建分页数字控件 -------------- */ 
  if(totalPageNum<10){ 
   for(var i=1;i<=totalPageNum;i++){ 
    if(i==currPageNum){ 
     settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
    }else{ 
     settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>"); 
    } 
   } 
  //如果总页数>=10 
  }else{ 
   //如果当前页小于5，则显示1-9项，且记忆当前项 
   if(currPageNum<5){ 
    for(var i =1;i<10;i++){ 
     if(i==currPageNum){ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
     }else{ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>"); 
     } 
    } 
   //如果当前页>=5，且总页数与当前页的差<4 
   }else if(totalPageNum-currPageNum<4){ 
    for(var i=totalPageNum-8;i<=totalPageNum;i++){ 
     if(i==currPageNum){ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
     }else{ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>"); 
     } 
    } 
   //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项  
   }else{ 
    for(var i=currPageNum-4;i<currPageNum+5;i++){ 
     if(i==currPageNum){ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
     }else{ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>"); 
     } 
    } 
   } 
  } 
  /* --------------- 3.结束：构建分页数字控件 -------------- */ 
   
  /* --------------- 4.开始：构建“下一页”和“尾页”控件 ------------- */ 
  if(totalPageNum==currPageNum){ 
   //如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充 
  }else{ 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>"); 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾页' class='last'>尾页</a></li>"); 
  } 
  /* --------------- 4.结束：构建“下一页”和“尾页”控件 ------------- */ 
   
  //还要为控件绑定点击事件 
  bindEvent(); 
 } 
  
})(jQuery); 
 
/* 
 * Page类 
 */ 
function Page(currPageNum,totalRowSize,pageRowSize){ 
 this.currPageNum = currPageNum; 
 this.totalRowSize = totalRowSize; 
 this.pageRowSize = pageRowSize; 
} 
Page.prototype.getCurrPageNum = function(){ 
 return this.currPageNum; 
}; 
Page.prototype.setCurrPageNum = function(currPageNum){ 
 this.currPageNum = currPageNum; 
}; 
Page.prototype.getTotalPageNum = function(){ 
 return (this.totalRowSize%this.pageRowSize==0)&#63;(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1); 
}; 
Page.prototype.getTotalRowSize = function(){ 
 return this.totalRowSize; 
}; 
Page.prototype.setTotalRowSize = function(totalRowSize){ 
 this.totalRowSize = totalRowSize; 
}; 
Page.prototype.getPageRowSize = function(){ 
 return this.pageRowSize; 
}; 
Page.prototype.setPageRowSize = function(pageRowSize){ 
 this.pageRowSize = pageRowSize; 
}; 
Page.prototype.getFirstResult = function(){ 
 if(this.getCurrPageNum()<=0) return 0; 
 return this.getPageRowSize() * (this.getCurrPageNum() - 1); 
}; 
Page.prototype.getMaxResult = function(){ 
 return this.getFirstResult() + this.getPageRowSize(); 
};

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

See all articles