最近一直研究jquery的分页效果，刚刚弄好了一个，拿出来与大家分享。分页效果与时光网的差不多。

先在aspx页面放置一个<div class=\"pageDivs\"></div> ，这个是用来存放分页的。

然后建一个page.js文件，具体代码如下(js中用到的css类是自己设置的，这里就不给出了，具体的大家可以自己设置一下css样式)：

//////////////////////右部按钮分页显示
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=$(\"div.pageDivs\").find(\"#Button1\");//上一页
var $button2=$(\"div.pageDivs\").find(\"#Button2\");//下一页
var $first=$(\"div.pageDivs\").find(\"#First\");//首页
var $last=$(\"div.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=$(\"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){

/////////////这里放你具体的数据显示，使用ajax动态加载处理数据

pageCount=\"通过数据处理获得的页面总数\";

span(pageCount,pageIndex,7,2);//对分页效果进行调用，这里设置左边显示7个页码，右边显示2个页码。

}

//////////////////////////////为页码绑定事件

$(\"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);
});
});