jquery dynamic paging effect comparable to TIME network _jquery

Recently has been studying the page effect of jquery, just finished one, take out to share with you. The paging effect is similar to the time network.

First, place a <div class= "Pagedivs" in the ASPX page, which is used for paging.

Then build a page.js file, the specific code as follows (JS used in the CSS class is set up, here is not given, the specific people can set their own CSS style):

Copy Code code as follows:

$ (document). Ready (function () {
var pagecount=0;//total number of pages, set in the function of data processing

Right button pagination display
function Right (Pagecount,limit,rlimit) {
var html= "";
if (parseint (PageCount)-limit>=rlimit) {
For (Var i=parseint (PageCount)-rlimit+1; I<=parseint (PageCount); i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>";}
}
else{
For (var i=parseint (limit) +1; i<=pagecount; i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>";}
}
return HTML;
}
Home, last, previous page, next page
function Changestate (pageindex,pagecount) {
var $button 1=$ ("Div.pagedivs"). Find ("#Button1");//Previous Page
var $button 2=$ ("Div.pagedivs"). Find ("#Button2");//Next page
var $first =$ ("Div.pagedivs"). Find ("#First");//Home
var $last =$ ("Div.pagedivs"). Find ("#Last");/end
if (parseint (pageIndex) ==1) {
$first. CSS ("display", "none");
$button 1.css ("Display", "none");}
else{
$first. CSS ("display", "inline");
$button 1.css ("display", "inline");
$first. attr ("page", 1);
$button 1.attr ("page", parseint (PageIndex)-1);}
if (parseint (pageIndex) ==pagecount) {
$button 2.css ("Display", "none");
$last. CSS ("display", "none");
else{
$last. CSS ("display", "inline");
$button 2.css ("display", "inline");
$last. attr ("page", PageCount);
$button 2.attr ("page", parseint (PageIndex) +1);}

}
The number of page numbers displayed to the left of the span dynamic paging, and the number of page numbers on the right, requiring limit>rlimit
function span (pagecount,pageindex,limit,rlimit) {
Var iscontinue=true;//indicates whether the function continues to execute
var html= "<a id= ' href= ' # ' >|<</a><a id= ' Button1 ' href= ' # ' ><</a> ';
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<=limit) {
for (var i=1; i<=pagecount; i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>"}
}
else{
if (parseint (PageIndex) < (limit-2)) {
for (var i=1; i<=limit; i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>";}
html+= "...";
Html+=right (Pagecount,limit,rlimit);
}
else{
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<parseint (PageIndex) -1+limit; i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>";}
html+= "...";
Html+=right (Pagecount,limit,rlimit);
}
else{
for (var i=1; i<=rlimit; i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>";}
html+= "...";
var rest=parseint (PageCount)-parseint (rlimit);
if (rest<limit) {
For (Var i=parseint (rlimit) +1; I<=parseint (PageCount); i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>";}
}
else{
var start=parseint (PageCount)-parseint (limit) +1;
for (var I=start; i<=pagecount; i++) {
html+= "<a page=" +i+ "leaf= ' leaf ' >" +i+ "</a>";}
}
}

}
else{
html=$ ("Div.pagedivs"). html ();
$ ("Div.pagedivs"). HTML (HTML);
Iscontinue=false;
}
}

}
}
if (iscontinue) {
html+= "<a id= ' Button2 ' href= ' >></a><a ' the id= ' last ' href= ' # ' >>|</a> ';
$ ("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) {

Here's your specific data display, using AJAX to dynamically load processing data

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

Span (pagecount,pageindex,7,2),//to the paging effect, where the setting displays 7 page numbers to the left and 2 page numbers to 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);
});
});

This way, the above pagination algorithm can be encapsulated, and the specific project does not matter, can be universal.