自制jq分頁插件

or0fun 發(fā)布于2019-08-20 12:02 / 1328人閱讀

摘要：由于第一次寫插件，中間有借鑒別人的代碼。添加選中藍(lán)色背景上一頁下一頁點(diǎn)擊的頁數(shù)下一頁上一頁用法總頁數(shù)當(dāng)前選中頁回調(diào)函數(shù)

由于第一次寫jq插件，中間有借鑒別人的代碼。

 (function(){
    var ms = {

        fillHtml: function(obj, option) {
            obj.empty();
            var totalPage = option.pageCount,
                pageHtml = "",
                dotHtml = "...",
                tempHtml = "";

            if (option.currentPage > 5) {
                tempHtml = "1
2
...";

                for(var i = option.currentPage - 2 ; i <= (option.currentPage + 2 > totalPage ? totalPage : option.currentPage + 2); i++) {
                    var temp = "" +i+ "";
                    if (option.currentPage === i ) {
                        temp = ""+ i +"";
                    }

                    if (option.currentPage >= totalPage - 2) {
                        dotHtml = "";
                    }
                    pageHtml += temp;
                };

            }else {

                for(var i = 1; i <= ( 6 > totalPage ? totalPage : 6); i++) {
                    var temp = "" +i+ "";
                    if (option.currentPage === i ) {                //添加選中藍(lán)色背景
                        temp = ""+ i +"";
                    };

                    if (option.currentPage >= totalPage - 2) {
                        dotHtml = "";
                    }
                    pageHtml += temp;
                };
            }
            
            pageHtml = ""+
                        "上一頁" + tempHtml +
                        pageHtml + dotHtml +
                        "下一頁";
            
            obj.append(pageHtml);
        },

        bindEvent: function(obj, option) {

            $(obj).on("click",".page-num",function(){
                if ($(this).parent("li") && $(this).parent("li").hasClass("current-page")) {
                    return;
                }
                var current = Number( $(this).text() );                //點(diǎn)擊的頁數(shù)
                ms.fillHtml(obj, {"currentPage": current, "pageCount": option.pageCount});
                option.backFunction();
            });

            $(obj).on("click",".next-page",function(){
                var current = Number( $(".current-page a").text() );                //下一頁
                if (current === option.pageCount){
                    return;
                }
                ms.fillHtml(obj, {"currentPage": current + 1, "pageCount": option.pageCount});
                option.backFunction();
            });

            $(obj).on("click",".prev-page",function(){
                var current = Number( $(".current-page a").text() );                //上一頁
                if (current === 1){
                    return;
                }
                ms.fillHtml(obj, {"currentPage": current-1, "pageCount": option.pageCount});
                option.backFunction();
            });
        },
        
        init: function(obj, option){

            return (function(){
                ms.fillHtml(obj, option);
                ms.bindEvent(obj, option);
            })();
        }
    };


    $.fn.creatPage = function(option) {

        var initOption = {
                pageCount: 10,
                currentPage: 1,
                backFunction: function(){}
        };
        option.pageCount = Number(option.pageCount);
        option.currentPage = Number(option.currentPage);
        
        var option = $.extend(initOption, option);
        
        ms.init(this, option);
    }
})()

HTML

用法

$("#pageCont").creatPage({
        pageCount: 18,            //總頁數(shù)
        currentPage: 1,            //當(dāng)前選中頁
        backFunction: function(){    //回調(diào)函數(shù)
            
        }
    });