Home > Web Front-end > JS Tutorial > body text

jquery dynamic paging effect is comparable to Time.com_jquery

WBOY
Release: 2016-05-16 16:35:26
Original
1455 people have browsed it

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<=parseInt(pageCount); i ){
html ="" i "";}
}
else{
for(var i=parseInt(limit) 1; i<=pageCount; 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<=limit){
for(var i=1; i<=pageCount; i ){
html ="" i ""}
}
else{
if(parseInt(pageIndex)<(limit-2)){
for(var i=1; i<=limit; i ){
html ="" i "";}
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 html ="" i "";}
html="...";
html =right(pageCount,limit,rlimit);
}
else{
for(var i=1; i<=rlimit; i ){
html ="" i "";}
html="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
if(rest for(var i=parseInt(rlimit) 1; i<=parseInt(pageCount); i ){
html ="" i "";}
}
else{
var start=parseInt(pageCount)-parseInt(limit) 1;
for(var i=start; i<=pageCount; 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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template