后台管理系统——翻页插件

翻页插件（含每页数目功能）

(function ($) {
    
    function TurnPage(options) {
        // 添加翻页的页面元素
        this.wrap = options.wrap;
        // 总的数据条数
        this.allPageSize = options.allPageSize;
        // 当前页
        this.nowPage = options.nowPage;
        // 每页展示的数据数量
        this.pageSize = options.pageSize;
        // 翻页的时候回调函数
        this.changePageCb = options.changePageCb;
        // 100 / 15  总页数
        this.allPage = Math.ceil(this.allPageSize / this.pageSize);
        // 如果当前页 大于了总页数  则报错不渲染翻页
        if (this.nowPage > this.allPage) {
            alert('页码错误');
            return false;
        }
        // this.init = function () {
            // 渲染dom元素
            this.renderDom();
            // 绑定事件
            this.bindEvent();
        // }
    }

    TurnPage.prototype.renderDom = function () {
        // 清空页面内要添加翻页的区间
        $(this.wrap).empty();
        // 每页条数元素
        var oDiv = $('<div class="page-size"><span>每页条数</span></div>');
        // 每页条数的输入框
        var oInp = $('<input class="size" type="number" min=1 max=50 value="' + this.pageSize +'"></input>');
        // 插入到页面中
        oDiv.append(oInp).appendTo(this.wrap);
        // 翻页部分
        var oUl = $('<ul class="my-turn-page"></ul>');
        // 展示三页
        // if (this.nowPage > 1) {
        //     $('<li class="prev-page">上一页</li>').appendTo(oUl);
        //     $('<li class="num">1</li>').appendTo(oUl);
        // }
        // if (this.nowPage > 2) {
        //     $('<span>...</span>').appendTo(oUl);
        // }
        // $('<li class="num active">' + this.nowPage + '</li>').appendTo(oUl);

        // if (this.nowPage < this.allPage - 1) {
        //     $('<span>...</span>').appendTo(oUl);
        // }
        // if (this.nowPage != this.allPage) {
        //     $('<li class="num">' + this.allPage + '</li>').appendTo(oUl);
        //     $('<li class="next-page">下一页</li>').appendTo(oUl);
        // }
        // 展示多页  中间5页
        // 渲染上一页按钮
        if (this.nowPage > 1) {
            $('<li class="prev-page">上一页</li>').appendTo(oUl);
        }
        // 单独渲染第一页
        if (this.nowPage > 3) {
            $('<li class="num">1</li>').appendTo(oUl);
        }
        // 渲染前面省略号
        if (this.nowPage > 4) {
            $('<span>...</span>').appendTo(oUl);
        }
        // 中间五页
        for (var i = this.nowPage - 2; i <= this.nowPage + 2; i ++) {
            if (i == this.nowPage) {
                $('<li class="num active">' + i + '</li>').appendTo(oUl);
            } else if (i > 0 && i <= this.allPage){
                $('<li class="num">' + i + '</li>').appendTo(oUl);
            }
        }
        // 渲染后面省略号
        if (this.nowPage + 2 < this.allPage - 1) {
            $('<span>...</span>').appendTo(oUl);
        }
        // 单独渲染最后一页
        if (this.nowPage + 2 < this.allPage) {
            $('<li class="num">' + this.allPage + '</li>').appendTo(oUl);
        }
        // 渲染下一页
        if (this.nowPage < this.allPage) {
            $('<li class="next-page">下一页</li>').appendTo(oUl);
        }
        $(this.wrap).append(oUl);
    }
    // 绑定事件
    TurnPage.prototype.bindEvent = function () {
        var self = this;
        // 每页的点击事件 点击页码进行翻页
        $('.num', this.wrap).click(function () {
            var page = parseInt($(this).text());
            self.changePage(page);
        });
        // 上一页点击事件
        $('.prev-page', this.wrap).click(function () {
            if (self.nowPage > 1) {
                self.changePage(self.nowPage - 1);
            }
        });
        // 下一页点击事件
        $('.next-page', this.wrap).click(function () {
            if (self.nowPage < self.allPage) {
                self.changePage(self.nowPage + 1);
            }
        });
        // 每页条数修改事件
        $('.size', this.wrap).change(function () {
            // 修改条数， 总页数也跟着变化  当前页应当初始化为1
            self.pageSize = parseInt($(this).val());
            self.allPage = Math.ceil(self.allPageSize / self.pageSize);
            self.changePage(1);
        });
    }
    // 切换页码
    TurnPage.prototype.changePage = function (page) {
        this.nowPage = page;
        // 重新渲染翻页
        this.renderDom();
        // 重新绑定事件
        this.bindEvent();
        // 执行翻页的回调函数  将一些数据返回给用户  用于页面数据修改   
        this.changePageCb && this.changePageCb({
            nowPage: this.nowPage,
            pageSize: this.pageSize,
        });
    }

    $.fn.extend({
        page: function (options) {
            options.wrap = this;
            new TurnPage(options);
            // pageObj.init();
            return this;
        }
    })
} (jQuery))

调用的时候方式如下：

$('.wrapper').page({
    allPageSize: 10,
    pageSize: 5,
    nowPage: 1,
    changePageCb: function (page) {
        console.log('cb', page);
    }
})

翻页插件（不含每页数目功能）

(function () {

    function TurnPage(options) {
        this.wrap = options.wrap;
        this.curPage = options.curPage || 1;
        this.allPage = options.allPage || 1;
        this.changePage = options.changePage || function () {};

        if (this.curPage > this.allPage) {
            alert('请输入正确页码');
            return false;
        }
        this.fillHTML();
        this.bindEvent();
    }
    TurnPage.prototype.fillHTML = function () {
        $(this.wrap).empty();
        // 添加上一页按钮
        if (this.curPage > 1) {
            $(this.wrap).append($('<li class="prev-page">上一页</li>'));
        } else {
            $(this.wrap).remove('.prev-page');
        }

        // 填充中间页 
        // 如果当前页不是第一页  并且当前页与第一页之间差2页以及两页以上  添加第一页
        if (this.curPage != 1 && this.curPage - 2 > 1) {
            $(this.wrap).append($('<li class="tab-number">1</li>'));
        }

        // 如果当前页的前两页 大于第二页 则出现省略号
        if (this.curPage - 2 > 2) {
            $(this.wrap).append($('<span>...</span>'));
        }

        // 渲染当前页数左右两页
        for (var i = this.curPage - 2; i <= this.curPage + 2; i++) {
            // 当前页要在1-allPage之间
            if(i > 0 && i <= this.allPage) {
                var oLi = $('<li class="tab-number">' + i + '</li>');
                if (i == this.curPage) {
                    oLi.addClass('cur-page')
                }
                $(this.wrap).append(oLi);
            }
        }
        // 当前页数与最后一页之间搁三页及以上出现省略号
        if (this.allPage - this.curPage > 3) {
            $(this.wrap).append($('<span>...</span>'));
        }
        // 添加最后一页
        if (this.curPage + 2 < this.allPage) {
            $('<li class="tab-number">' + this.allPage + '</li>').appendTo($(this.wrap));
        }

        // 添加下一页按钮
        if (this.curPage < this.allPage) {
            $(this.wrap).append($('<li class="next-page">下一页</li>'));
        } else {
            $(this.wrap).remove('.next-page');
        }
    }

    TurnPage.prototype.bindEvent = function () {
        var self = this;
        $('.prev-page', this.wrap).click(function (e) {
            self.curPage --;
            self.change();
        });
        $('.next-page', this.wrap).click(function () {
            self.curPage ++;
            self.change();
        });
        $('.tab-number', this.wrap).click(function () {
            var curPage = parseInt($(this).text());
            self.curPage = curPage;
            self.change();
        });
    }
    TurnPage.prototype.change = function () {
        this.fillHTML();
        this.bindEvent();
        this.changePage(this.curPage);
    }
    $.fn.extend({
        turnPage: function (options) {
            options.wrap = this;
            new TurnPage(options);
            return this;
        }
    })
}())

调用的时候，使用方式如下：

$('#turn-page').turnPage({
	allPage: 10,
    curPage: 4,
    changPage: function () {
        console.log('----')
    }
});