码迷,mamicode.com
首页 > Web开发 > 详细

刚写的一个js分页类,未优化

时间:2015-05-04 15:36:20      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:分页

以前也写过,很久以前了,写的很长,并且使用起来也不灵活。这次搞了个灵活版的。

/*
 * SunPage --自定义分页类,仅获取分页的html代码,简单应用
 * Sunbt 2015-5-4
 * v1.0
 * @param current_page int 当前页
 * @param totle_page int 总页数
 * @param take_num int 当前页左右携带页码数
 * @param func_obj obj 分页实现函数
*/
var SunPage = function(current_page, totle_page, take_num, func_obj) {
    this.current_page = current_page;
    this.totle_page = totle_page;
    this.take_num = take_num;
    this.func_obj = func_obj;
    this.page_html = "";
    this.init();
}

SunPage.prototype = {
    constructor : SunPage,
    init : function() {
        var start = this.current_page - this.take_num < 2 ? 2 : this.current_page - this.take_num, //起始索引
            _end_patch = start - (this.current_page - this.take_num), //右侧补码
            _end = this.current_page + this.take_num + _end_patch, //计算结束索引
            end = _end < this.totle_page ? _end : this.totle_page - 1, //实际结束索引
            _start_patch = _end -  end; //左侧补码
        if (_start_patch > 0 && _end_patch == 0) { //如果有左侧补码,并且右侧补码为0,进行左侧侧补码
            start -= _start_patch;
            start = start < 2 ? 2 : start;
        }
        this.func_obj.previous.call(this); //上一页
        this.func_obj.common.call(this, 1); //第一页
        if (start == 3) {
            this.func_obj.common.call(this, 2); //开始索引为三,第二页直接显示
        } else if(start > 3) {
            this.func_obj.ellipsis.call(this); //开始索引大于三,显示省略号
        }
        for (var i = start; i <= end; i++) {
            this.func_obj.common.call(this, i); //从索引开始到结束
        }
        if (end < this.totle_page - 2) {
            this.func_obj.ellipsis.call(this); //结束索引为总页码减二,则显示总页码减一的页码
        } else if(end == this.totle_page - 2) {
            this.func_obj.common.call(this, this.totle_page - 1); //
        }
        this.func_obj.common.call(this, this.totle_page);
        this.func_obj.next.call(this);
    },
    toString :function() {
        return this.page_html;
    }
}

嘿嘿,灵活也要付出代价的,就是调用的时候会复杂些。下面是调用方式:

var sunpage = new SunPage(6, 20, 2, {
    previous : function() {
        if(this.current_page == 1) {
            this.page_html += ‘<li class="k"><span>上一页</span></li>‘;
        } else {
            this.page_html += ‘<li class="k"><a href="?page=‘ + (this.current_page - 1) + ‘">上一页</a></li>‘;
        }
    },
    next : function() {
        if(this.current_page == this.totle_page) {
            this.page_html += ‘<li class="k"><span>下一页</span></li>‘;
        } else {
            this.page_html += ‘<li class="k"><a href="?page=‘ + (this.current_page + 1) + ‘">下一页</a></li>‘;
        }
    },
    ellipsis : function() {
        this.page_html += ‘<li class="ellipsis">...</li>‘;
    },
    common :function(num){
        if(num == this.current_page) {
            this.page_html += ‘<li><span>‘ + num + ‘</span></li>‘;
        } else {
            this.page_html += ‘<li><a href="?page=‘ + num + ‘">‘ + num + ‘</a></li>‘;
        }
    }
});
document.write(sunpage.toString());

很多地方都没做校验的,有问题后再修改吧。目前测试没问题。

刚写的一个js分页类,未优化

标签:分页

原文地址:http://blog.csdn.net/sbt0198/article/details/45480523

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!