後臺管理系統——翻頁插件

翻頁插件（含每頁數目功能）

(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('----')
    }
});