面向对象的纯js分页组件

很不错的JQEURY PAGINATION哦。

最好提供个下载链接，同时提供一个使用的DEMO。
当然上面的说明也要附为readme.txt里最好了。

/**
 * 带页码的分页
* new PagerB({
recordCount:36,
pageContainer:"page",
funPageSearch:function(currentPage){
location="testPage.html?currentPage="+currentPage;
},
currentPage:1,
pageSize:10,
pageNum=12,
sync:false
}); 
* recordCount 总的记录数 
* pageContainer容纳分页元素的id 
* funPageSearch 回调的查询方法 
* currentPage 当前页,默认为1 
* pageSize 每页的记录数，默认10条 
* pageNum 每页显示的页码数量，默认值=10，最小值亦为10 
* sync 同步还是异步，默认为同步 
* @author:yxd 
* email:[email protected]
*
*/
function PagerB(pageInfo){
this.recordCount=pageInfo.recordCount;
this.pageSize=pageInfo.pageSize || 10;
this.pageContainer=$("#"+pageInfo.pageContainer);
this.funPageSearch=pageInfo.funPageSearch;
this.currentPage=pageInfo.currentPage || 1;
this.totalPage=this.calculateTotalPage();
this.pageNum=Math.max(pageInfo.pageNum || 10 , 10);
pageInfo.sync===false ? this.sync=false:this.sync=true;

this.htmlNumContainer=null;//页码的容器div
this.htmlFirstPage=null; //首页
this.htmlPrvPage=null; //上一页
this.htmlNextPage=null; //下一页
this.htmlLastPage=null; //尾页
this.htmlPageNumContainer=null; //页码集合的容器div
this.htmlPageNum=null; //所有页码的集合
this.htmlTotalRecord=null; //
this.htmlPageSize=null;
this.htmlTotalPage=null;

this.draw();
} PagerB.prototype={
draw:function(){
/*
*页码的显示形式为：
* <div id="pager">
* 共300行
* 每页20行
* 共15页
* <div class="a">
* 首页
* 上一页
* <div class="b">
* 1
* 2
* 3
* </div>
* 下一页
* 尾页
* </div>
* </div>
*/
 var that=this;
var pageHtml='共'+this.recordCount+'行   '
 +'每页'+this.pageSize+'行   '
 +'共'+this.totalPage+'页   '
 +"<div class='a' style='display:none'>"
 +"首页 "
 +"上一页 "
 +"<div class='b' style='display:inline'>"
 +this.setPageNum()
 +"</div>"
 +" 下一页"
 +" 尾页"
 +"</div>";
this.pageContainer.append(pageHtml);
this.htmlTotalRecord=$("span:eq(0)",this.pageContainer);
this.htmlPageSize=$("span:eq(1)",this.pageContainer);
this.htmlTotalPage=$("span:eq(2)",this.pageContainer);
this.htmlNumContainer=$(".a",this.pageContainer);
this.htmlFirstPage=$(".a > span:eq(0)",this.pageContainer);
this.htmlPrvPage=$(".a > span:eq(1)",this.pageContainer);
this.htmlNextPage=$(".a > span:eq(2)",this.pageContainer);
this.htmlLastPage=$(".a > span:eq(3)",this.pageContainer);
this.htmlPageNumContainer=$(".b",this.htmlNumContainer);
this.htmlPageNum=$("span",this.htmlPageNumContainer);
this.htmlFirstPage.click(function(){
if(that.currentPage!=1){
that.currentPage=1;
that.gotoPage();
}
});
this.htmlPrvPage.click(function(){
if(that.currentPage!=1){
that.currentPage--;
that.gotoPage();
}
});
this.htmlNextPage.click(function(){
if(that.currentPage!=that.totalPage){
that.currentPage++;
that.gotoPage();
}
});
this.htmlLastPage.click(function(){
if(that.currentPage!=that.totalPage){
that.currentPage=that.totalPage;
that.gotoPage();
}
});
if(this.totalPage>1){
this.htmlNumContainer.css("display","inline");
this.setStyle();
}
},
 setPageNum:function(){
//设置每页显示的页码，
//页码的显示取决与3个因素：
//1、每页显示的页码数量
//2、当前页
//3、总页数
var pageNumArray=[];
var firstNum=1,
 lastNum=this.totalPage;

//当总页数>每页显示的页数时才需要额外的处理
if(this.totalPage>this.pageNum){
var halfNum=Math.floor(this.pageNum/2);
firstNum=this.currentPage-halfNum;
if(firstNum<=0){
firstNum=1;
}else{
var isTotalPage=false;
while((firstNum+this.pageNum)>(this.totalPage+1)){
isTotalPage=true;
firstNum--;
}
}
if(isTotalPage){
lastNum=this.totalPage;
}else{
lastNum=firstNum+this.pageNum-1;
}
}
for(var i=firstNum;i<=lastNum;i++){
pageNumArray.push(""+i+"");
}
return pageNumArray.join(" ");
},
setStyle:function(){//设置显示的样式
var that=this;
if(this.currentPage!=1){
this.htmlFirstPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");
this.htmlPrvPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");
}else{
this.htmlFirstPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");
this.htmlPrvPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");
}

if(this.currentPage!=this.totalPage){
this.htmlLastPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");
this.htmlNextPage.css({cursor:"pointer",color:""}).removeClass("unUse").addClass("use");
}else{
this.htmlLastPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");
this.htmlNextPage.css({cursor:"",color:"grey"}).removeClass("use").addClass("unUse");
}

this.htmlPageNum.each(function(){
var pageNum=Number($(this).html());
if(that.currentPage!=pageNum){
$(this).css({cursor:"pointer",
 textDecoration:"underline"
 })
 .click(function(){
 that.currentPage=pageNum;
 that.gotoPage();
 })
 .mouseover(function(){
 $(this).css("color","green");
 })
 .mouseout(function(){
 $(this).css("color","");
 }).removeClass("cur").addClass("use");
}else{
$(this).css("color","blue").removeClass("use").addClass("cur");
}
});

},
reDraw:function(_recordCount,_pageSize){
this.recordCount=_recordCount;
this.pageSize=_pageSize || this.pageSize;
this.currentPage=1;
this.totalPage=this.calculateTotalPage();
this.htmlTotalRecord.html(this.recordCount);
 this.htmlPageSize.html(this.pageSize);
 this.htmlTotalPage.html(this.totalPage);
if(this.totalPage>1){
this.htmlNumContainer.css("display","inline");
this.htmlPageNumContainer.html(this.setPageNum());
this.htmlPageNum=$("span",this.htmlPageNumContainer);
this.setStyle();
}else{
this.htmlNumContainer.css("display","none");
}
},
calculateTotalPage:function(){//计算总页数
return Math.floor((this.recordCount+this.pageSize-1)/this.pageSize);
},
gotoPage:function(){
if(!this.sync){//异步时，需要更新组件的外观
this.htmlPageNumContainer.html(this.setPageNum());
this.htmlPageNum=$("span",this.htmlPageNumContainer);
this.setStyle();
}
this.funPageSearch(this.currentPage);
}
};

最近因为项目的原因，把这个分页组件重构了下，现在的显示风格是类似百度的那种，对整个代码的结构也优化了，增加了几个亮点：
1、将参数对象化，这也是“javascript语言精粹”中提倡的，这样可以方便的处理默认参数。
2、通过传入参数显示的支持了页面时异步还是同步的，默认是同步的，即刷新的。
3、添加了和CSS的接口，组件本身已经完全实现了功能，并有基本的样式，但是通过CSS的接口，可以使得通过附加的外部样式来改变或者美化分页的显示效果。欢迎大家指正，在项目中使用后，同事都说不错，呵呵。

复杂了一点点，其实可以做很多简化跟优化的．自己用的跟你的完全不同，没有jquery，同样是ajax，分页只用到两个函数,一个是fy,一个是send_to_search,send_to_search是点击后查询分页数据
function fy(L,l,All,s_r,page,tj,id)//L分页长度，l是每页数量，All是总量,s_r是输入的页数，后面的可有可无，比较粗糙还没优化好
 {
s_r=Math.floor(s_r);
 var min = 0;
 var max = 0;
 var D = 0;

 var pagecount = (All % l == 0) ? (All / l) : (Math.floor(All / l) + 1);//页数 var L_C =(L % 2 == 0) ? (L / 2) : (Math.floor(L / 2) + 1);//页码居中 if (s_r <= 0 || s_r > pagecount)//第一种情况：输入数不在有效的页数内，所以把它定位到第一页
 {
 min = 1;
 D = 1;
 max = (pagecount > L) ? L : pagecount;

 }
 else
 {
 if (pagecount <= L)//第二种情况：当总页数小于页码长度时
 {
 min = 1;
 D = s_r;
 max = pagecount;
 }
 else
 {
 if (s_r <= L_C)//第三种情况：
 {
 min = 1;
 D = s_r;
 max = L;
 }
 else
 {
 if ((pagecount - s_r)<= L_C)//第四种情况：
 {
 min = pagecount - L + 1;
 D = s_r;
 max = pagecount;
 }
 else
 {
 min = s_r - L_C + 1;
 D = s_r;
 max =(L % 2 == 0) ? (s_r + L_C) : (s_r + L_C - 1);
//alert(s_r +"___"+ L_C +"____"+ 1)
//alert(min+"____"+max+"____"+D+"____"+s_r+"____"+L_C+"____"+L+"____"+pagecount)
 }
 }
 }
 } var a = "";
 if (tj != null)
 {
 for(var c in tj)
 {

 a += "&" + tj[c];
if(c==tj.length-1)
 {
break;
}
 }
 }

 var fy = ""; for (var kg = min; kg <= max; kg++)
 {
//alert(D);
 fy += (kg == D) ? "" + kg + "&nbsp" : " " + kg + " ";
 }
 var FY = "首页  上一页 " + fy + " 下一页  尾页  定位到第<input type=\"text\" class=\"box2\" value=\""+kg+"\" style=\"width:32px; height:20px;margin: 0px 0px 0px 0px;padding:0px 0px 0px 0px;text-align:center;\" />页点击定位";
//maxp=pagecount;
 return FY;
 }

调试易

面向对象的纯js分页组件

解决方案 »