jquery动态分页效果堪比时光网
最近一直研究jquery的分页效果，刚刚弄好了一个，拿出来与大家分享。分页效果与时光网的差不多。
先在x页面放置一个<p class="pagedivs"></p> ，这个是用来存放分页的。
然后建一个page.js文件，具体代码如下(js中用到的css类是自己设置的，这里就不给出了，具体的大家可以自己设置一下css样式)：
代码如下:
$(document).ready(function(){
var pagecount=0;//总页数，在数据处理的函数里设定
//////////////////////右部按钮分页显示
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;
}
//////////////////////////首页，尾页，上一页，下一页
function changestate(pageindex,pagecount){
var $button1=$("p.pagedivs").find("#button1");//上一页
var $button2=$("p.pagedivs").find("#button2");//下一页
var $first=$("p.pagedivs").find("#first");//首页
var $last=$("p.pagedivs").find("#last");//尾页
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);}
}
////////////////////////////////span动态分页 左边显示的页码个数，右边显示的页码个数,要求limit>rlimit
function span(pagecount,pageindex,limit,rlimit){
var iscontinue=true;//指示是否继续执行函数
var html="<a id='first' href='#' >|<</a><a id='button1' href='#' ><</a>";
var change=(parseint(pagecount)-parseint(rlimit))/(parseint(limit)-2);//指示分页码可以变动的次数
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=$("p.pagedivs").html();
$("p.pagedivs").html(html);
iscontinue=false;
}
}
}
}
if(iscontinue){
html+="<a id='button2' href='#' >></a><a id='last' href='#' >>|</a>";
$("p.pagedivs").html(html);}
changestate(pageindex,pagecount);
$("p.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){
/////////////这里放你具体的数据显示，使用ajax动态加载处理数据
pagecount="通过数据处理获得的页面总数";
span(pagecount,pageindex,7,2);//对分页效果进行调用，这里设置左边显示7个页码，右边显示2个页码。
}
//////////////////////////////为页码绑定事件
$("p.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);
});
});