jquery Dynamic Paging

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

Website: http://www.mtime.com/movie/news/all/

First put a <div class= "Pagedivs" on the ASPX page ></div>, which is used to store the paging.

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

$ (document). Ready (function () {
var pagecount=0;//total 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 page, Prev, next
function Changestate (pageindex,pagecount) {
var $button 1=$ ("Div.pagedivs"). Find ("#Button1");//prev
var $button 2=$ ("Div.pagedivs"). Find ("#Button2");//Next page
var $first =$ ("Div.pagedivs"). Find ("#First");//Home
var $last =$ ("Div.pagedivs"). Find ("#Last");//Last
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 on the left side of the span dynamic page, the number of pages displayed on the right, requires limit>rlimit
function span (pagecount,pageindex,limit,rlimit) {
Var iscontinue=true;//indicates whether the function continues to execute
var html= "<a id= ' first ' href= ' # ' >|<</a><a id= ' Button1 ' href= ' # ' ><</a> ';
var change= (parseint (PageCount)-parseint (Rlimit))/(parseint (limit)-2);//indicates the number of times a 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 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);//Invoke the paging effect, where the left side shows 7 page numbers 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);
});

});

This is OK, the above paging algorithm can be encapsulated, and the specific project does not matter, can be common.

jquery Dynamic Paging