> 웹 프론트엔드 > JS 튜토리얼 > jquery 동적 페이징 효과는 Time.com_jquery와 비슷합니다.

jquery 동적 페이징 효과는 Time.com_jquery와 비슷합니다.

WBOY
풀어 주다: 2016-05-16 16:35:26
원래의
1459명이 탐색했습니다.

최근 jquery의 페이징 효과를 연구하고 있는데 하나 만들어서 모두와 공유했습니다. 페이징 효과는 Mtime.com과 유사합니다.

먼저 aspx 페이지에

를 배치합니다. 이는 페이징을 저장하는 데 사용됩니다.

그런 다음 page.js 파일을 만듭니다. 구체적인 코드는 다음과 같습니다. (js에 사용되는 CSS 클래스는 직접 설정하므로 여기서는 제공하지 않습니다. 구체적인 내용은 CSS 스타일을 직접 설정하면 됩니다.)

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
var pageCount=0;//데이터 처리 함수에서 설정한 총 페이지 수

////////////////////////오른쪽 버튼은 페이지 매김을 표시합니다
함수 right(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit 1; i<=parseInt(pageCount); i ){
html ="" i "";}
}
그렇지 않으면{
for(var i=parseInt(limit) 1; i<=pageCount; i ){
html ="" i "";}
}
HTML 반환;
}
////////////////////////////홈페이지, 마지막 페이지, 이전 페이지, 다음 페이지
함수 변경상태(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//이전 페이지
var $button2=$("div.pageDivs").find("#Button2");//다음 페이지
var $first=$("div.pageDivs").find("#First");//홈페이지
var $last=$("div.pageDivs").find("#Last");//마지막 페이지
if(parseInt(pageIndex)==1){
$first.css("표시","없음");
$button1.css("표시","없음");}
그렇지 않으면{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("페이지",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("표시","없음");
$last.css("표시","없음");}
그렇지 않으면{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex) 1);}

}
//////////////////////////////////////왼쪽에 표시되는 페이지 번호 스팬 동적 페이징, 오른쪽에 표시되는 페이지 번호 수, 요구 사항 제한>r제한
함수 범위(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//함수 계속 실행 여부를 나타냅니다.
var html="|<<" ;
varchange=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//페이지 번호를 변경할 수 있는 횟수를 나타냅니다
if(pageCount!=0&&pageCount!=1){
if(pageCount<=limit){
for(var i=1; i<=pageCount; i ){
html ="" i ""}
}
그렇지 않으면{
if(parseInt(pageIndex)<(limit-2)){
for(var i=1; i<=limit; i ){
html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
그렇지 않으면{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1 parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
for(var i=parseInt(pageIndex)-1; i html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
그렇지 않으면{
for(var i=1; i<=rlimit; i ){
html ="" i "";}
html="...";
var 나머지=parseInt(pageCount)-parseInt(rlimit);
if(rest for(var i=parseInt(rlimit) 1; i<=parseInt(pageCount); i ){
html ="" i "";}
}
그렇지 않으면{
var start=parseInt(pageCount)-parseInt(limit) 1;
for(var i=start; i<=pageCount; i ){
html ="" i "";}
}
}


}
그렇지 않으면{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
계속=false;
}
}

}
}
if(isContinue){
html =">>|";
$("div.pageDivs").html(html);}
changeState(pageIndex,pageCount);
$("div.pageDivs").find("a[page="parseInt(pageIndex) "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings ("a[page:visible").removeClass("current").addClass("disabled").attr("href", "#");
}

기능 페이지(pageIndex){

//////////////여기에 특정 데이터 표시를 넣고 Ajax를 사용하여 데이터를 동적으로 로드하고 처리합니다

pageCount="데이터 처리를 통해 얻은 총 페이지 수";

span(pageCount,pageIndex,7,2);//페이징 효과를 호출합니다. 여기서는 왼쪽에 7개의 페이지 번호, 오른쪽에 2개의 페이지 번호가 표시되도록 설정되어 있습니다.

}

//////////////////////////////페이지 번호에 대한 이벤트 바인딩

$("div.pageDivs").find("a:visible").live("click",function(){
var result=$(this).attr("페이지");
if((typeof $(this).attr("leaf"))!= '정의되지 않음'){
$(this).removeAttr("href").removeClass("비활성화됨").addClass("현재").siblings().removeClass("현재").addClass("비활성화됨").attr("href", "#");}

페이지(결과);
});
});


위의 페이징 알고리즘은 캡슐화될 수 있으며 특정 프로젝트와 관련이 없으며 보편적으로 사용될 수 있습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿