jquery的分頁外掛pagination的使用

專注前端30年發表於2017-11-10
jQuery

引入

在jq後面引入pagination外掛即可

    <script src="js/jquery.js"></script>
    <script src="js/jquery.pagination.js"></script>

使用

  • 呼叫方法
$(selector).pagination(option, callback);
  • 回撥和初始化
    $(selector).pagination({
       callback: function(api){
           //引數api為函式返回值，詳情請檢視下面的相關引數的api的值
           console.log('點選頁碼呼叫該回撥'); //把請求介面函式放在這兒，每次點選請求一次
        }
    }, function(){
        console.log('初始化'); //外掛初始化時呼叫該回撥，比如請求第一次介面來初始化分頁配置
    });

相關引數

  • options(引數配置)
引數 預設值 說明
pageCount 9 總頁數
totalData 0 資料總條數
current 1 當前第幾頁
showData 0 每頁顯示的條數
prevCls ‘prev’ 上一頁class
nextCls ‘next’ 下一頁class
prevContent ‘<’ 上一頁節點內容
nextContent ‘>’ 下一頁節點內容
activeCls ‘active’ 當前頁選中狀態class名
count 3 當前選中頁前後頁數
coping false 是否開啟首頁和末頁，值為boolean
isHide false 總頁數為0或1時隱藏分頁控制元件
keepShowPN false 是否一直顯示上一頁下一頁
homePage ” 首頁節點內容，預設為空
endPage ” 尾頁節點內容，預設為空
jump false 是否開啟跳轉到指定頁數，值為boolean型別
jumpIptCls ‘jump-ipt’ 文字框內容
jumpBtnCls ‘jump-btn’ 跳轉按鈕class
jumpBtn ‘跳轉’ 跳轉按鈕文字內容
callback function(){} 回撥函式，引數”index”為當前頁

- 回撥callback的返回值api的相關引數

方法 引數 說明
getPageCount() 無 獲取總頁數
setPageCount(page) page：頁數 設定總頁數
getCurrent() 無 獲取當前頁

使用說明

  • 當前方法的第一個值是物件，option的相關引數可以設定當前物件傳入即可，比如設定總頁數$(selector).pagination({pageCount:100});
  • 如果需要非同步請求，可以在callback裡面獲取當前點選的頁數，然後通過ajax請求頁面

外掛程式碼

由於外掛的程式碼不是很長，又是我們國人mss寫的，我直接把程式碼貼上出來。
本人更新：調整了一下分頁按鈕的位置，增加...點選事件，可以直接加count或者減count（預設是3）

/**
 * pagination分頁外掛
 * @version 1.5.0
 * @author mss
 * @url https://github.com/Maxiaoxiang
 *
 * @呼叫方法
 * $(selector).pagination(option, callback);
 * -此處callback是初始化呼叫，option裡的callback才是點選頁碼後呼叫
 *
 * -- example --
 * $(selector).pagination({
 *     ...
 *     callback: function(api){
 *         console.log('點選頁碼呼叫該回撥'); //把請求介面函式放在這兒，每次點選請求一次
 *     }
 * }, function(){
 *     console.log('初始化'); //外掛初始化時呼叫該回撥，比如請求第一次介面來初始化分頁配置
 * });
 */
;
(function (factory) {
    if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
        // AMD或CMD
        define(["jquery"], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function (root, jQuery) {
            if (jQuery === undefined) {
                if (typeof window !== 'undefined') {
                    jQuery = require('jquery');
                } else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        //Browser globals
        factory(jQuery);
    }
}(function ($) {

    //配置引數
    var defaults = {
        totalData: 0, //資料總條數
        showData: 0, //每頁顯示的條數
        pageCount: 9, //總頁數,預設為9
        current: 1, //當前第幾頁
        prevCls: 'prev', //上一頁class
        nextCls: 'next', //下一頁class
        prevContent: '<', //上一頁內容
        nextContent: '>', //下一頁內容
        activeCls: 'active', //當前頁選中狀態
        coping: false, //首頁和尾頁
        isHide: false, //當前頁數為0頁或者1頁時不顯示分頁
        homePage: '', //首頁節點內容
        endPage: '', //尾頁節點內容
        keepShowPN: false, //是否一直顯示上一頁下一頁
        count: 3, //當前頁前後分頁個數
        jump: false, //跳轉到指定頁數
        jumpIptCls: 'jump-ipt', //文字框內容
        jumpBtnCls: 'jump-btn', //跳轉按鈕
        jumpBtn: '跳轉', //跳轉按鈕文字
        callback: function () {} //回撥
    };

    var Pagination = function (element, options) {
        //全域性變數
        var opts = options, //配置
            current, //當前頁
            $document = $(document),
            $obj = $(element); //容器

        /**
         * 設定總頁數
         * @param {int} page 頁碼
         * @return opts.pageCount 總頁數配置
         */
        this.setPageCount = function (page) {
            return opts.pageCount = page;
        };

        /**
         * 獲取總頁數
         * 如果配置了總條數和每頁顯示條數，將會自動計算總頁數並略過總頁數配置，反之
         * @return {int} 總頁數
         */
        this.getPageCount = function () {
            return opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
        };

        /**
         * 獲取當前頁
         * @return {int} 當前頁碼
         */
        this.getCurrent = function () {
            return current;
        };

        /**
         * 填充資料
         * @param {int} 頁碼
         */
        this.filling = function (index) {
            var html = '';
            current = parseInt(index) || parseInt(opts.current); //當前頁碼
            var pageCount = this.getPageCount(); //獲取的總頁數
            if (current >= opts.count + 2 && current != 1 && pageCount != opts.count) {
                var home = opts.coping && opts.homePage ? opts.homePage : '1';
                html += opts.coping ? '<a href="javascript:;" data-page="1">' + home + '</a><!--<span class="more-prev">...</span>--><a class="more-prev" href="javascript:;" data-page="'+ (current-opts.count) +'">...</a>' : '';
            }
            if (opts.keepShowPN || current > 1) { //上一頁
                html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
            } else {
                if (opts.keepShowPN == false) {
                    $obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
                }
            }
            var start = (current - opts.count) <= 1 ? 1 : (current - opts.count);
            var end = (current + opts.count) >= pageCount ? pageCount : (current + opts.count);
            for (; start <= end; start++) {
                if (start <= pageCount && start >= 1) {
                    if (start != current) {
                        html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
                    } else {
                        html += '<span class="' + opts.activeCls + '">' + start + '</span>';
                    }
                }
            }
            if (opts.keepShowPN || current < pageCount) { //下一頁
                html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>'
            } else {
                if (opts.keepShowPN == false) {
                    $obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
                }
            }
            if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
                var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
                html += opts.coping ? '<!--<span class="more-next">...</span>--><a class="more-prev" href="javascript:;" data-page="'+ (current+opts.count) +'">...</a><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a>' : '';
            }
            html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';
            $obj.empty().html(html);
        };

        //繫結事件
        this.eventBind = function () {
            var that = this;
            var pageCount = that.getPageCount(); //總頁數
            var index = 1;
            $obj.off().on('click', 'a', function () {
                if ($(this).hasClass(opts.nextCls)) {
                    if ($obj.find('.' + opts.activeCls).text() >= pageCount) {
                        $(this).addClass('disabled');
                        return false;
                    } else {
                        index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
                    }
                } else if ($(this).hasClass(opts.prevCls)) {
                    if ($obj.find('.' + opts.activeCls).text() <= 1) {
                        $(this).addClass('disabled');
                        return false;
                    } else {
                        index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
                    }
                } else if ($(this).hasClass(opts.jumpBtnCls)) {
                    if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
                        index = parseInt($obj.find('.' + opts.jumpIptCls).val());
                    } else {
                        return;
                    }
                } else {
                    index = parseInt($(this).data('page'));
                }
                that.filling(index);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            //輸入跳轉的頁碼
            $obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
                var $this = $(this);
                var val = $this.val();
                var reg = /[^\d]/g;
                if (reg.test(val)) $this.val(val.replace(reg, ''));
                (parseInt(val) > pageCount) && $this.val(pageCount);
                if (parseInt(val) === 0) $this.val(1); //最小值為1
            });
            //回車跳轉指定頁碼
            $document.keydown(function (e) {
                if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
                    var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
                    that.filling(index);
                    typeof opts.callback === 'function' && opts.callback(that);
                }
            });
        };

        //初始化
        this.init = function () {
            this.filling(opts.current);
            this.eventBind();
            if (opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') $obj.hide();
        };
        this.init();
    };

    $.fn.pagination = function (parameter, callback) {
        if (typeof parameter == 'function') { //過載
            callback = parameter;
            parameter = {};
        } else {
            parameter = parameter || {};
            callback = callback || function () {};
        }
        var options = $.extend({}, defaults, parameter);
        return this.each(function () {
            var pagination = new Pagination(this, options);
            callback(pagination);
        });
    };

}));

相關文章