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