js版的oschian分頁類

代碼以下:javascript

page.js代碼以下html

/**
* 分頁類
* pageCount     // 分頁總數
* currentPage   // 當前頁
* link          // 鏈接地址
*/
function Page(opts) {
    this.opts = {
        // 基本配置
        pageCount:          0,                       // 分頁總數
        currentPage:        1,                       // 當前頁碼
        link:               '',                      // 分頁鏈接地址前綴
        lastNum:            4,                       // 尾部頁碼數字
        end:                9,                       // 在7頁之前顯示的分頁數量要和7頁之後的分頁數量一直
        // 文字常量
        prevText:           '上一頁',                 // 上一頁文字
        nextText:           '下一頁',                 // 下一頁文字
        // 樣式配置
        pageListClass:      'page-list',             // 分頁數字樣式
        prevClass:          'page-prev',             // 上一頁樣式
        nextClass:          'page-next',             // 下一頁樣式
        currentPageClass:   'page-current',          // 當前頁樣式
        disabledClass:      'page-disabled',         // 分頁鏈接不可用
    };
    // 覆寫屬性
    for(key in opts) {
        this.opts[key] = opts[key];
    }
    opts = this.opts;

    this.htlm = '';
    // 獲取分頁html
    this.getHtml = function() {
        if(opts.currentPage > opts.pageCount) {
            opts.currentPage = opts.pageCount;
        }
        if(opts.currentPage < 1) {
            opts.currentPage = 1;
        }
        this.html = '';
        this.getPrevPage();             // 上一頁
        this.getFirstPage();            // 首頁
        this.getPageNumber();           // 頁碼
        this.getNextPage();             // 下一頁
        return this.html;
    };
    // 獲取頁碼
    this.getPageNumber = function() {
        // 1 2-11 30
        // 顯示更多
        if(opts.pageCount > 11) {

            // 當前頁碼前面有3個頁碼,當前頁碼後面有6個頁碼 == 10
            var start = 2;
            if(opts.currentPage > 5) {
                start = opts.currentPage - 3;
                opts.end = opts.currentPage + opts.lastNum;
            }
            if(opts.currentPage + opts.lastNum > opts.pageCount) {
                opts.end = opts.pageCount;
            }
            for(var i = start; i <= opts.end; i++) {
                var classArr = [];

                classArr.push(opts.pageListClass);
                if(getCurrentPage(i)) {
                    classArr.push(getCurrentPage(i));
                    this.html += '<em class="' + classArr.join(' ') + '">' + i + '</em>';
                } else {
                    this.html += '<a href="' + getLink(i) + '" class="' + classArr.join(' ') + '">' + i + '</a>';
                }
            }

            // 是否顯示尾頁邏輯
            if((opts.currentPage + opts.lastNum) < opts.pageCount) {
                this.getLastPage(); // 尾頁
            }
        } else {
            for(var i = 2; i <= opts.pageCount; i++) {
                var classArr = [];

                classArr.push(opts.pageListClass);
                if(getCurrentPage(i)) {
                    classArr.push(getCurrentPage(i));
                    this.html += '<em class="' + classArr.join(' ') + '">' + i + '</em>';
                } else {
                    this.html += '<a href="' + getLink(i) + '" class="' + classArr.join(' ') + '">' + i + '</a>';
                }

            }
        }
    };
    // 獲取首頁頁碼
    this.getFirstPage = function() {
        var classArr = [];

        classArr.push(opts.pageListClass);
        if(getCurrentPage(1)) {
            classArr.push(getCurrentPage(1));
        }
        if(getCurrentPage(1)) {
            this.html += '<em class="' + classArr.join(' ') + '">' + 1 + '</em>';
        } else {
            this.html += '<a href="' + getLink(1) + '" class="' + classArr.join(' ') + '">1</a>';
        }
    };
    // 獲取尾頁頁碼
    this.getLastPage = function() {
        var classArr = [];

        classArr.push(opts.pageListClass);
        if(getCurrentPage(opts.pageCount)) {
            classArr.push(getCurrentPage(opts.pageCount));
        }
        if(getCurrentPage(opts.pageCount)) {
            this.html += '<em class="' + classArr.join(' ') + '">' + opts.pageCount + '</em>';
        } else {
            this.html += '<a href="' + getLink(opts.pageCount) + '" class="' + classArr.join(' ') + '">' + opts.pageCount + '</a>';
        }

    };
    // 獲取上一頁
    this.getPrevPage = function() {
        var classArr = [];
        var href = "";

        classArr.push(opts.prevClass);
        if(opts.currentPage == 1) {
            // 若是是在第一頁則不顯示上一頁
            return;
            classArr.push(opts.disabledClass);
            href = 'javascript:;';
        } else {
            href = getLink(opts.currentPage - 1);
        }
        this.html += '<a href="' + href + '" class="' + classArr.join(' ') + '">' + opts.prevText + '</a>';
    };
    // 獲取下一頁
    this.getNextPage = function() {
        var classArr = [];
        var href = "";

        classArr.push(opts.nextClass);
        if(opts.currentPage == opts.pageCount) {
            // 若是是在最後一頁則不顯示下一頁
            return;
            classArr.push(opts.disabledClass);
            href = 'javascript:;';
        } else {
            href = getLink(opts.currentPage + 1);
        }
        this.html += '<a href="' + href + '" class="' + classArr.join(' ') + '">' + opts.nextText + '</a>';
    };
    // 獲取鏈接路徑
    function getLink(num) {
        return opts.link+ '/' + num;
    }
    // 檢測是不是當前頁
    function getCurrentPage(pageNum) {
        if(opts.currentPage == pageNum) {
            return opts.currentPageClass;
        }
        return '';
    }
};
module.exports = Page;

調用以下:java

// 分頁
var p = new Page({
    pageCount: Math.ceil(result[0] / pageCount),
    currentPage: parseInt(currentPage),
    link: '/upload/packagelist'
});
// p.getHtml() // 返回拼裝好的html

12-3 修復了bug,和增長了靈活的預留頁配置this

相關文章
相關標籤/搜索