分頁pagination實現及其應用

1、分頁jquery.page.js

//分頁插件
/**
2014-08-05 ch
**/
(function ($) {
    var ms = {
        init: function (obj, args) {
            return (function () {
                ms.fillHtml(obj, args);
                ms.bindEvent(obj, args);
            })();
        },
        //填充html
        fillHtml: function (obj, args) {
            return (function () {
                obj.empty();
                //上一頁
                if (args.current > 1) {
                    obj.append('<a href="javascript:;" class="prevPage"><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>');
                } else {
                    obj.remove('.prevPage');
                    obj.append('<span class="disabled"><i class="fa fa-angle-double-left" aria-hidden="true"></i></span>');
                }
                //中間頁碼
                if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
                    obj.append('<a href="javascript:;" class="tcdNumber">' + 1 + '</a>');
                }
                if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
                    obj.append('<span class="tcdPageCode-ellipsis">...</span>');
                }
                var start = args.current - 2, end = args.current + 2;
                if ((start > 1 && args.current < 4) || args.current == 1) {
                    end++;
                }
                if (args.current > args.pageCount - 4 && args.current >= args.pageCount) {
                    start--;
                }
                for (; start <= end; start++) {
                    if (start <= args.pageCount && start >= 1) {
                        if (start != args.current) {
                            obj.append('<a href="javascript:;" class="tcdNumber">' + start + '</a>');
                        } else {
                            obj.append('<span class="current">' + start + '</span>');
                        }
                    }
                }
                if (args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5) {
                    obj.append('<span class="tcdPageCode-ellipsis">...</span>');
                }
                if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
                    obj.append('<a href="javascript:;" class="tcdNumber">' + args.pageCount + '</a>');
                }
                //下一頁
                if (args.current < args.pageCount) {
                    obj.append('<a href="javascript:;" class="nextPage"><i class="fa fa-angle-double-right"></i></a>');
                } else {
                    obj.remove('.nextPage');
                    obj.append('<span class="disabled"><i class="fa fa-angle-double-right"></i></span>');
                }
            })();
        },
        //綁定事件
        bindEvent: function (obj, args) {
            return (function () {

                $(obj).find('.tcdNumber').off("click").on("click", function () {
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj, { "current": current, "pageCount": args.pageCount });
                    if (typeof (args.backFn) == "function") {
                        args.backFn(current);
                    }
                });

　　　　　　　　　 // 不用這個是為了適應那種每次查詢之后，分頁條數變化的情況，而且這種情況很常見，
　　　　　　　　　 // 如果采用下面這種方式，會出現多次綁定，多次查詢的情況。
                //obj.on("click","a.tcdNumber",function(){
                //    var current = parseInt($(this).text());
                //    ms.fillHtml(obj, { "current": current, "pageCount": args.pageCount });
                //    if (typeof (args.backFn) == "function") {
                //        args.backFn(current);
                //    }
                //});

                $(obj).find('.prevPage').off('click').on("click", function () {
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj, { "current": current - 1, "pageCount": args.pageCount });
                    if (typeof (args.backFn) == "function") {
                        args.backFn(current - 1);
                    }
                });

                //上一頁
                //obj.on("click","a.prevPage",function(){
                //    var current = parseInt(obj.children("span.current").text());
                //    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
                //    if(typeof(args.backFn)=="function"){
                //        args.backFn(current-1);
                //    }
                //});

                $(obj).find('.nextPage').off('click').on("click", function () {
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj, { "current": current + 1, "pageCount": args.pageCount });
                    if (typeof (args.backFn) == "function") {
                        args.backFn(current + 1);
                    }
                });

                //下一頁
                //obj.on("click","a.nextPage",function(){
                //    var current = parseInt(obj.children("span.current").text());
                //    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
                //    if(typeof(args.backFn)=="function"){
                //        args.backFn(current+1);
                //    }
                //});

            })();
        }
    }
    $.fn.createPage = function (options) {
        var args = $.extend({
            pageCount: 10,
            current: 1,
            backFn: function () { }
        }, options);
        ms.init(this, args);
    }
})(jQuery);

//代碼整理：懶人之家 www.lanrenzhijia.com

2、使用方法

2.1 js的應用

首先把jquery.page.js引入

第二js的關鍵代碼

$(".tcdPageCode").createPage({
　　pageCount: 總頁數,
　　current: 當前頁,
　　backFn: function (p) {
　　　　//單擊回調方法，p是當前頁碼
　　　　查詢方法(p);
　　}
});

2.2 樣式代碼

.tcdPageCode {
    padding: 15px 20px;
    color: #ccc;
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .tcdPageCode a {
        display: inline-block;
        color: #0D0D0D;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 6px 12px;
        border: 1px solid #ddd;
        vertical-align: middle;
        padding: 6px 12px;
        line-height: 1.42857143;
        text-decoration: none;
    }


    .tcdPageCode span.current {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 6px 12px;
        color: #0D0D0D;
        background-color: #CCCCCC;
        border: 1px solid #ddd;
        vertical-align: middle;
        line-height: 1.42857143;
        text-decoration: none;
    }

.tcdPageCode-ellipsis {
    display: inline-block;
    width: 24px;
    text-align: center;
}

.tcdPageCode span.disabled {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 6px 12px;
    color: #bfbfbf;
    background: #f2f2f2;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    vertical-align: middle;
}

 

至於例子，不想寫了...