日期:2014-05-16  浏览次数:20373 次

面向对象的纯js分页组件
本帖最后由 cj205 于 2010-12-23 16:53:30 编辑
这是小弟我开发的一个纯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>行&nbsp;&nbsp;&nbsp;'+
        '每页'+this.pageSize+'行&nbsp;&nbsp;&nbsp;'+        
        '共<span>'+this.totalPage+'</span>页&nbsp;&nbsp;&nbsp;'+
    '<div style="display:none;">转到第<input value="'+this.currentPage+'" style="width:28px" maxlength="'+this.maxLength()+'">页&nbsp;&nbsp;&nbsp;'+
         '<span>首页</span>&nbsp;&nbsp;&nbsp;'+
         '<span>上页</span>&nbsp;&nbsp;&nbsp;'+
         '<span>下页</span>&nbsp;&nbsp;&nbsp;'+
         '<span>尾页</span></div>&nbsp;&nbsp;&nbsp;';
this.pageContainer.append(str);
this.htmlRecordCount=$("span:eq(0)",this.pageContainer);