面向对象的纯js分页组件

xiaobaoxiaodun 2010-12-23 04:24:48
这是小弟我开发的一个纯js的分页组件，支持刷新的和不刷新的分页，和任何后台技术无关，完全用js来控制，因为里面的代码依赖了jquery,所以使用时要先导入jquery.js。

代码如下：
/**

	 * 

	 * @param {} recordCount  总的记录数

	 * @param {} pageSize     每页的记录数	 

	 * @param {} divId        容纳分页元素的id

	 * @param {} funPageSearch  回调的查询方法

	 * currentPage  当前页,默认为1

	 * @author:yxd

	 * @email:yxd_yxd2008@163.com

	 */

	function Pager(recordCount,pageSize,divId,funPageSearch,currentPage){

		this.recordCount=recordCount;

		this.pageSize=pageSize;

		this.pageContainer=$("#"+divId);  

		this.funPageSearch=funPageSearch;

		this.currentPage=currentPage || 1;

		this.totalPage=this.calculateTotalPage(recordCount);

        this.htmlRecordCount=null;

        this.htmlTotalPage=null;

        this.htmlInputPage=null;

        this.htmlFirstPage=null;

        this.htmlPrvPage=null;

        this.htmlNextPage=null;

        this.htmlLastPage=null;

        this.htmlDiv=null;

		this.draw();

	}

	

	Pager.prototype={		

		draw:function(){	

			var oo=this;

			var str='共<span>'+this.recordCount+'</span>行   '+

			        '每页'+this.pageSize+'行   '+			       

			        '共<span>'+this.totalPage+'</span>页   '+

				    '<div style="display:none;">转到第<input value="'+this.currentPage+'" style="width:28px" maxlength="'+this.maxLength()+'">页   '+

			         '<span>首页</span>   '+

			         '<span>上页</span>   '+

			         '<span>下页</span>   '+

			         '<span>尾页</span></div>   ';

			this.pageContainer.append(str);

			this.htmlRecordCount=$("span:eq(0)",this.pageContainer);

			this.htmlTotalPage=$("span:eq(1)",this.pageContainer);

			this.htmlInputPage=$("input:eq(0)",this.pageContainer);

			this.htmlFirstPage=$("span:eq(2)",this.pageContainer);

			this.htmlPrvPage=$("span:eq(3)",this.pageContainer);

			this.htmlNextPage=$("span:eq(4)",this.pageContainer);

			this.htmlLastPage=$("span:eq(5)",this.pageContainer);

			this.htmlDiv=$("div",this.pageContainer);

            if(this.totalPage>1){

            	this.htmlDiv.css("display","inline");            	

            }

            //设定按钮的样式

            this.setButtonStyle();

            

            //为按钮绑定事件

            //首页

            this.htmlFirstPage.click(function(){

            	if(oo.currentPage!=1){

            		oo.currentPage=1;

            		oo.gotoPage();

            	}

            });

            

            //上页

            this.htmlPrvPage.click(function(){

            	if(oo.currentPage!=1){

            		oo.currentPage--;

            		oo.gotoPage();

            	}

            });

            

            //下页

            this.htmlNextPage.click(function(){

            	if(oo.currentPage!=oo.totalPage){

            		oo.currentPage++;

            		oo.gotoPage();

            	}

            });

            

            //尾页

            this.htmlLastPage.click(function(){

            	if(oo.currentPage!=oo.totalPage){

            		oo.currentPage=oo.totalPage;

            		oo.gotoPage();

            	}

            });

            

            //处理输入框的事件

            this.htmlInputPage.focus(function(){

            	this.select();

            }).change(function(){

            	if(   isNaN(Number(this.value)) 

            	   || Number(this.value)==0 

            	   || Number(this.value)>oo.totalPage){

            		this.value=oo.currentPage;

            		return;

            	}

            	oo.currentPage=Number(this.value);

            	oo.gotoPage();				            	

            }).keydown(function(evt){

            	var validKey={48:0,49:1,50:2,51:3,52:4,53:5,54:6,55:7,56:8,57:9,

		                      96:0,97:1,98:2,99:3,100:4,101:5,102:6,103:7,104:8,105:9,

		                      8:'',37:'',39:'',46:''};

				if(!(evt.keyCode in validKey)){

					return false;

				}

            }); 

		},

		gotoPage:function(){

			if(this.htmlInputPage.val()!=this.currentPage){

				this.htmlInputPage.val(this.currentPage);

			}			

			this.setButtonStyle();

			this.funPageSearch(this.currentPage);

		},

		maxLength:function(){//计算输入页数的长度

			return (this.totalPage+'').length;

		},

		setButtonStyle:function(){//根据当前的页数设置按钮的样式

			switch(this.currentPage){

				case 1:{

					this.htmlFirstPage.css({cursor:"",color:"grey"});

					this.htmlPrvPage.css({cursor:"",color:"grey"});

					this.htmlNextPage.css({cursor:"pointer",color:"black"});

					this.htmlLastPage.css({cursor:"pointer",color:"black"});

					break;

				}

				case this.totalPage:{

					this.htmlFirstPage.css({cursor:"pointer",color:"black"});

					this.htmlPrvPage.css({cursor:"pointer",color:"black"});

					this.htmlNextPage.css({cursor:"",color:"grey"});

					this.htmlLastPage.css({cursor:"",color:"grey"});

					break;

				}

				default:{

					this.htmlFirstPage.css({cursor:"pointer",color:"black"});

					this.htmlPrvPage.css({cursor:"pointer",color:"black"});

					this.htmlNextPage.css({cursor:"pointer",color:"black"});

					this.htmlLastPage.css({cursor:"pointer",color:"black"});

					break;

				}

			}

		},

		calculateTotalPage:function(_recordCount){//计算出总页数

			return Math.floor((_recordCount+this.pageSize-1)/this.pageSize);

		},

		reDraw:function(_recordCount){//对于不刷新的查询，需要根据总记录数来重新设置分页元素

			this.currentPage=1;

			this.recordCount=Number(_recordCount);

			this.totalPage=this.calculateTotalPage(this.recordCount);

			if(this.totalPage<2){

				this.htmlDiv.css("display","none");

			}else{

				this.htmlDiv.css("display","inline");

			}

			this.setButtonStyle();

			this.htmlRecordCount.html(this.recordCount);

			this.htmlTotalPage.html(this.totalPage);

			this.htmlInputPage.val(this.currentPage);

			this.htmlInputPage.attr("maxlength",this.maxLength());

		},

		constructor:Pager

	}



使用方法如下：
1、 对于无需刷新的页面应用：
第一步：导入jquery.js
<script src="jquery.js"></script>
第二步：导入分页组件
<script src="pager.js"></script>
第三步：在页面上声明一个全局的js变量，
var pager;
第四步：在页面的初始化方法中实例化这个分页变量
$(function(){
pager=new Pager(0,//总的记录数
pageSize,//每页显示的记录数
‘pager’,//这是一个页面中的div元素的id，它就是分页组件的容器
function(currentPage){//传给分页组件的回调函数 mySheet.DoSearch("queryBudgetData.jsp",searchParam+"¤tPage="+currentPage);}
);
})
第五步：在页面中设定容纳分页组件元素的div
<div id="pager"></div>
第六步：当在页面中执行查询时，将查询到的总的记录数传给分页组件
pager.reDraw(recordCount);

2、 对于需要刷新的页面的使用方法和上面的前五步一样，不需要第六步，在第四步实例化这个分页组件的时候，最后要把当前页给传进去就行了，并且第一个参数应该是总的记录数
pager=new Pager(recordCount,pageSize,"pager",function(currentPage){ mySheet.DoSearch("queryBudgetData.jsp",searchParam+"¤tPage="+currentPage);
},currentPage);

因为我的这个应用是基于无刷新的，所以需要刷新的情况我没有测试，大概应该没问题，需要用的同学可以试试，不行的话就修改源代码。
这是小弟第一次尝试用OO的方式来写js,很是兴奋，不足之处，欢迎大家指教。


...全文
687 22 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
hankaibo 2013-08-07
  • 打赏
  • 举报
 回复
楼主好帖，收藏了。
LazyCat--懒猫 2011-07-14
  • 打赏
  • 举报
 回复
支持支持
燥动的心 2011-07-14
  • 打赏
  • 举报
 回复
楼主好样的，赞　
一经注册不得修改 2011-07-14
  • 打赏
  • 举报
 回复
复杂了一点点，其实可以做很多简化跟优化的．自己用的跟你的完全不同，没有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) ? "<span class=box>" + kg + "</span> " : " <span class=box2 onclick=\"send_to_search("+kg+","+id+")\" >" + kg + "</span> ";

            }

            var FY = "<span class=box2 onclick=\"send_to_search("+1+","+id+")\" >首页</span>  <span class=box2 onclick=\"send_to_search("+(D == 1 ? 1 : (D - 1))+","+id+")\" >上一页</span> " + fy + " <span class=box2 onclick=\"send_to_search("+((D < max) ? (D == 1 ? 2 : (D + 1)) : ((max == 0 ? max + 1 : max)))+","+id+")\" >下一页</span>  <span class=box2 onclick=\"send_to_search("+pagecount+","+id+")\" >尾页</span>  <span>定位到第<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;\" />页</span><span class=box2 onclick=\"send_to_search("+pagecount+","+id+")\" >点击定位</span>";

			//maxp=pagecount;

            return FY;

        }
itliyi 2011-07-14
  • 打赏
  • 举报
 回复
confidenceyu 2011-07-14
  • 打赏
  • 举报
 回复
顶楼主
xuexiaodong2009 2011-07-14
  • 打赏
  • 举报
 回复
支持!
xiaobaoxiaodun 2011-07-14
  • 打赏
  • 举报
 回复
/**
* 带页码的分页
* new PagerB({
recordCount:36,
pageContainer:"page",
funPageSearch:function(currentPage){
location="testPage.html?currentPage="+currentPage;
},
currentPage:1,
pageSize:10,
pageNum=12,
sync:false
});<br/>
* recordCount 总的记录数<br/>
* pageContainer容纳分页元素的id<br/>
* funPageSearch 回调的查询方法<br/>
* currentPage 当前页,默认为1<br/>
* pageSize 每页的记录数，默认10条<br/>
* pageNum 每页显示的页码数量，默认值=10，最小值亦为10<br/>
* sync 同步还是异步，默认为同步<br/>
* @author:yxd<br/>
* email:yxd_yxd2008@163.com
*
*/
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">
* 共<span>300</span>行
* 每页<span>20</span>行
* 共<span>15</span>页
* <div class="a">
* <span class="unUse">首页</span>
* <span class="unUse">上一页</span>
* <div class="b">
* <span class="cur">1</span>
* <span class="use">2</span>
* <span class="use">3</span>
* </div>
* <span class="use">下一页</span>
* <span class="use">尾页</span>
* </div>
* </div>
*/
var that=this;
var pageHtml='共<span>'+this.recordCount+'</span>行   '
+'每页<span>'+this.pageSize+'</span>行   '
+'共<span>'+this.totalPage+'</span>页   '
+"<div class='a' style='display:none'>"
+"<span>首页</span> "
+"<span>上一页</span> "
+"<div class='b' style='display:inline'>"
+this.setPageNum()
+"</div>"
+" <span>下一页</span>"
+" <span>尾页</span>"
+"</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("<span>"+i+"</span>");
}
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的接口，可以使得通过附加的外部样式来改变或者美化分页的显示效果。

欢迎大家指正，在项目中使用后，同事都说不错，呵呵。

ranbaosheng 2011-06-07
  • 打赏
  • 举报
 回复
很不错的分页组件，我们开发的项目中已经应用了。
hp2008001 2010-12-27
  • 打赏
  • 举报
 回复
谢谢分享
LONGZHEZHILONG 2010-12-27
  • 打赏
  • 举报
 回复
谢谢分享
wuyingzhuifen 2010-12-27
  • 打赏
  • 举报
 回复
楼主好人，谢谢分享！
yousite1 2010-12-27
  • 打赏
  • 举报
 回复
最好提供个下载链接，同时提供一个使用的DEMO。
当然上面的说明也要附为readme.txt里最好了。
xiaobaoxiaodun 2010-12-27
  • 打赏
  • 举报
 回复
希望有同学能给出一些建议，小弟不胜感激
mumubangditu 2010-12-23
  • 打赏
  • 举报
 回复
很不错的JQEURY PAGINATION哦。
蚂蚁上树 2010-12-23
  • 打赏
  • 举报
 回复
楼主是好淫
xiaobaoxiaodun 2010-12-23
  • 打赏
  • 举报
 回复
是管理员把我的js代码给整理了下吗，十分感谢！
flyerwing 2010-12-23
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 xiaobaoxiaodun 的回复:]
什么叫有闲心，这是工作中要用到的东西，顺便整理了下
[/Quote]
不好意思,向楼主道歉,致敬.(打击楼主积极性了)
xiaobaoxiaodun 2010-12-23
  • 打赏
  • 举报
 回复
什么叫有闲心，这是工作中要用到的东西，顺便整理了下
flyerwing 2010-12-23
  • 打赏
  • 举报
 回复
挺好,楼主真是有闲心呀.
支持!
加载更多回复（1）
原生js编写基于面向对象的分页组件
主要为大家详细介绍了原生js编写基于面向对象的分页组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自制纯js分页框架
自制纯js分页工具,花了点时间自己写的,比pagination更纯净更微型
java分页组件（直接复用，简单方便）
复用性很强的分页组件，欢迎大家下载使用！
分页组件+反射分页组件+反射分页组件+反射
分页组件+反射·企业级应用·非常强大！欢迎下载！！
简单易懂js分页（已封装）
简单易懂的js分页，已经分装好，通俗易懂
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章