최근 jquery의 페이징 효과를 연구하고 있는데 하나 만들어서 모두와 공유했습니다. 페이징 효과는 Mtime.com과 유사합니다.
먼저 aspx 페이지에
를 배치합니다. 이는 페이징을 저장하는 데 사용됩니다.그런 다음 page.js 파일을 만듭니다. 구체적인 코드는 다음과 같습니다. (js에 사용되는 CSS 클래스는 직접 설정하므로 여기서는 제공하지 않습니다. 구체적인 내용은 CSS 스타일을 직접 설정하면 됩니다.)
////////////////////////오른쪽 버튼은 페이지 매김을 표시합니다
함수 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="...";
html =right(pageCount,limit,rlimit);
}
그렇지 않으면{
for(var i=1; i<=rlimit; i ){
html ="" i "";}
html="...";
var 나머지=parseInt(pageCount)-parseInt(rlimit);
if(rest
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", "#");}
페이지(결과);
});
});