jquery dynamic paging effect is comparable to Time.com_jquery

I have been studying the paging effect of jquery recently. I just made one and shared it with everyone. The paging effect is similar to that of Mtime.com.

First place a

on the aspx page. This is used to store paging.

Then create a page.js file. The specific code is as follows (the css classes used in js are set by yourself, so they are not given here. You can set the css style yourself for specific details):

Copy code The code is as follows:

$(document).ready(function(){
var pageCount=0;//Total number of pages, set in the data processing function

////////////////////////The right button displays pagination
function right(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit 1; i html ="" i "";}
}
else{
for(var i=parseInt(limit) 1; i html ="" i "";}
}
return html;
}
////////////////////////////Home page, last page, previous page, next page
function changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//Previous page
var $button2=$("div.pageDivs").find("#Button2");//Next page
var $first=$("div.pageDivs").find("#First");//Homepage
var $last=$("div.pageDivs").find("#Last");//Last page
if(parseInt(pageIndex)==1){
$first.css("display","none");
$button1.css("display","none");}
else{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("page",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("display","none");
$last.css("display","none");}
else{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex) 1);}

}
///////////////////////////////////////The number of page numbers displayed on the left side of span dynamic paging, the number of page numbers displayed on the right side, requirements limit>rlimit
function span(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//Indicates whether to continue executing the function
var html="|" ;
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//Indicates the number of times the page number can be changed
if(pageCount!=0&&pageCount!=1){
if(pageCount for(var i=1; i html ="" i ""}
}
else{
if(parseInt(pageIndex) for(var i=1; i html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
else{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(limit-2) for(var i=parseInt(pageIndex)-1; i html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
else{
for(var i=1; i html ="" i "";}
html="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
if(rest for(var i=parseInt(rlimit) 1; i html ="" i "";}
}
else{
var start=parseInt(pageCount)-parseInt(limit) 1;
for(var i=start; i html ="" i "";}
}
}

}
else{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
isContinue=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", "#");
}

function page(pageIndex){

//////////////Put your specific data display here and use ajax to dynamically load and process the data

pageCount="Total number of pages obtained through data processing";

span(pageCount,pageIndex,7,2);//Call the paging effect. Here, it is set to display 7 page numbers on the left and 2 page numbers on the right.

}

////////////////////////////////Bind events for page numbers

$("div.pageDivs").find("a:visible").live("click",function(){
var result=$(this).attr("page");
if((typeof $(this).attr("leaf"))!= 'undefined'){
$(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href", "#");}

page(result);
});
});

That's it. The above paging algorithm can be encapsulated, has nothing to do with the specific project, and can be used universally.