pagnation.js

(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 ($) {

    //配置參數(shù)
    var defaults = {
        total: 0, //數(shù)據(jù)總條數(shù)
        pageSize: 10, //每頁(yè)顯示的條數(shù),默認(rèn)10條
        currentPage: 1, //當(dāng)前第幾頁(yè)
        pageCount:0, // 總頁(yè)數(shù)
        pagerCount: 7, //設(shè)置最大頁(yè)碼按鈕數(shù)。 頁(yè)碼按鈕的數(shù)量，當(dāng)總頁(yè)數(shù)超過該值時(shí)會(huì)折疊
        useJump: false, //是否啟動(dòng)跳轉(zhuǎn)
        useTotal:false,// 顯示所有條數(shù)
        callback: function () {} //回調(diào)
    };

    var Pagination = function (element, options) {
        //全局變量
        var opts = options, //配置
            current, //當(dāng)前頁(yè)
            $document = $(document),
            $obj = $(element); //容器
            
            opts.pagerCount = 7;
        /**
         * 設(shè)置總頁(yè)數(shù)
         * @param {int} page 頁(yè)碼
         * @return opts.pageCount 總頁(yè)數(shù)配置
         */
        this.setPageCount = function (page) {
            return opts.pageCount = page;
        };

        /**
         * 獲取總頁(yè)數(shù)
         * 如果配置了總條數(shù)和每頁(yè)顯示條數(shù)，將會(huì)自動(dòng)計(jì)算總頁(yè)數(shù)并略過總頁(yè)數(shù)配置，反之為0
         * @return {int} 總頁(yè)數(shù)
         */
        this.getPageCount = function () {
            return opts.total && opts.pageSize ? Math.ceil(parseInt(opts.total) / opts.pageSize) : opts.pageCount;
        };

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

        /**
         * 填充數(shù)據(jù)
         * @param {int} 頁(yè)碼
         */
        this.filling = function (index) {
            var html = '';
            if(opts.total>0){
	            current = parseInt(index) || parseInt(opts.currentPage); //當(dāng)前頁(yè)碼
	            var pageCount = this.getPageCount(); //獲取的總頁(yè)數(shù)
	            if(current>pageCount){
	                current = pageCount
	            }
	            if(current<=0){
	                current=1
	            }
	            if (opts.useTotal) {
	                html += "<span style='color:#999999;margin-right:10px;'>共" + opts.total + "條</span>"
	            }
	            if(opts.pagerCount<pageCount){
	               // 這是表明超過了設(shè)置最大頁(yè)碼按鈕數(shù)
	               // 1.以當(dāng)前頁(yè)碼為中心,獲取可加減的距離（最大頁(yè)碼按鈕數(shù)-1）/2，
	               const stepSize = (opts.pagerCount-1)/2; // 獲取步長(zhǎng)
	               let start = 0;
	               let end = 0;
	               // 先判斷他的起始點(diǎn)
	               if(pageCount-current>stepSize){
	                // 如果當(dāng)前頁(yè)減去第一頁(yè)大于步長(zhǎng)，那么就以current為中心
	                if(current-1>stepSize){
	                    start= current-stepSize+1
	                    end = current+stepSize-1
	                }
	                // 如果當(dāng)前頁(yè)減去第一頁(yè)小于或等于步長(zhǎng)
	                if(current-1<=stepSize){
	                    start= 1;
	                    end = current + (stepSize-current+1) + stepSize-1
	                }
	               }else{
	                end = pageCount;
	                if(end-current<stepSize){
	                    if(end-current===0){
	                        start = end -(stepSize*2)+1
	                    } else {
	                        // end-current 獲取最后頁(yè)碼到當(dāng)前頁(yè)的距離，用來計(jì)算剩下的步長(zhǎng)
	                        start = current-(stepSize-(end-current))-stepSize+1;
	                    }
	                    
	                } else {
	                    start = current-stepSize+1;
	                }
	                
	               }
	               if(current >1 && current <= pageCount) {
	                    html+= "<span class='s-up s-span s-ts'>上一頁(yè)</span>"
	                }
	               // 如果開始大于1，那么就要添加1和省略號(hào)
	               if(start>1){
	                html+= "<span class='s-span s-count s-ts'>1</span><span class='s-span s-sl-one s-ts'>···</span>"
	               }
	               for(;start<=end;start++){
	                html+= current===start? "<span class='s-active s-span s-count s-ts'>" + (start)+"</span>" : "<span class='s-span s-count s-ts'>" + (start)+"</span>"
	               }
	               // 如果結(jié)束小于總頁(yè)數(shù)，那么就要添加總頁(yè)數(shù)結(jié)束和添加省略號(hào)
	               if(end<pageCount){
	                html+= "<span class='s-span s-sl-two s-ts'>···</span><span class='s-span s-count s-ts'>" + pageCount +"</span>"
	               }
	            } else {
	               // 這是總頁(yè)數(shù)pageCount小于設(shè)置最大頁(yè)碼按鈕數(shù)opts.pagerCount
	               for(let s=0;s<pageCount;s++){
	                html+= current===s+1? "<span class='s-active s-span s-ts s-count'>" + (s+1)+"</span>" : "<span class='s-span s-count'>" + (s+1)+"</span>"
	               }
	            }
	
	            if(current < pageCount) {
	                html+= "<span class='s-next s-span s-ts'>下一頁(yè)</span>"
	            }
	            if(opts.useJump){
	                html+='<input type="text" class="s-t-jump s-ts" value='+ current +'>';
	            }
            }
            $obj.empty().html(html);
        };

        //綁定事件
        this.eventBind = function () {
            var that = this;
            var pageCount = that.getPageCount(); //總頁(yè)數(shù)
            var index = 1;
            // 點(diǎn)擊跳轉(zhuǎn)指定頁(yè)
            $obj.off().on('click', '.s-count', function () {
                index = $(this).html()
                that.filling(index);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            //輸入跳轉(zhuǎn)的頁(yè)碼
            $obj.on('blur propertychange', '.s-t-jump', 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
                that.filling($this.val());
                typeof opts.callback === 'function' && opts.callback(that);
            });
            //回車跳轉(zhuǎn)指定頁(yè)碼
            $document.keydown(function (e) {
                if (e.keyCode == 13 && $obj.find('.s-t-jump').val()) {
                    var index = parseInt($obj.find('.s-t-jump').val());
                    that.filling(index);
                    typeof opts.callback === 'function' && opts.callback(that);
                }
            });
            // 下一頁(yè)
            $obj.on('click', '.s-next', function () {
                current = current + 1
                that.filling(current);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            // 上一頁(yè)
            $obj.on('click', '.s-up', function () {
                current = current - 1
                that.filling(current);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            // 第二個(gè)省略號(hào)
            $obj.on('mouseenter', '.s-sl-two', function () {
                $('.s-sl-two').html(">>");
            });
            // 下一頁(yè)更多
            $obj.on('click', '.s-sl-two', function () {
                current = parseFloat($('.s-count').eq("-2").html()) + 2
                that.filling(current);
                typeof opts.callback === 'function' && opts.callback(that);
            });

            // 第一個(gè)省略號(hào)
            $obj.on('mouseenter', '.s-sl-one', function () {
                $('.s-sl-one').html("<<");
            });
            // 上一頁(yè)更多
            $obj.on('click', '.s-sl-one', function () {
                current = parseFloat($('.s-count').eq("2").html())-6
                that.filling(current);
                typeof opts.callback === 'function' && opts.callback(that);
            });

        };

        //初始化
        this.init = function () {
            this.filling(opts.current);
            this.eventBind();
        };
        this.init();
    };

    $.fn.pagination = function (parameter, callback) {
        if (typeof parameter == 'function') { //重載
            callback = parameter;
            parameter = {};
        } else {
            parameter = parameter || {};
            callback = callback || function () {};
        }
        // $.extend將兩個(gè)對(duì)象合并
        var options = $.extend({}, defaults, parameter);
        return this.each(function () {
            var pagination = new Pagination(this, options);
            callback(pagination);
        });
    };

}));

cs.html文章來源地址http://www.zghlxwxcb.cn/news/detail-458102.html

<!DOCTYPE html>
<html lang="cn-ZH">

<head>
    <meta charset="UTF-8">
    <title>pagination.js - 分頁(yè)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../favicon.ico" rel="icon" type="image/x-icon" />
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style>
        .s-active{
            color: #409EFF !important;
        }
        .s-span{
            display: inline-block;
            margin-right:10px;
            cursor: pointer;
            font-size: 16px;
        }
        .s-up,.s-next{
            font-size: 16px;
        }
        .s-up:hover,.s-next:hover{
            color: #409EFF !important;
        }
        .s-t-jump{
            width:50px;
            height:28px;
            border:solid 1px #909399;
            border-radius: 4px;
            font-size: 16px;
            text-align: center;
        }
        input:focus{
            outline: none;
        }

        .s-ts{
            -moz-user-select: none; /*mozilar*/
            -webkit-user-select: none; /*webkit*/
            -ms-user-select: none; /*IE*/
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="m-style M-box3"></div>
    </div>
    <script src="https://www.cwgj.xyz/js/jquery.js"></script>
    <script src="../assets/js/pagnation.js"></script>
    <script>
    let pageSize = 10, currentPage=1;
        $(function () {
            getFastModuleItemList()
        });
        function getFastModuleItemList() {
            const info = JSON.parse(Decrypt(localStorage.getItem('MyNote_Login_Info')));
            const data = {
                fast_module_id: activeId,
                name: $(".search-input").val(),
                token: info.token,
                currentPage: currentPage,
                pageSize: pageSize
            }
            httpGet('FastModule/GetFastModuleItemList', { info: Encrypt(JSON.stringify(data)) }, (res) => {
                const datas = JSON.parse(res);
                if (datas.result) {
                    $('.m-pagnation').pagination({
                        total: datas.data2 && datas.data2.length>0 ? Number(datas.data2[0]['Total']) : 0, //數(shù)據(jù)總條數(shù)
                        pageSize: pageSize, //每頁(yè)顯示的條數(shù),默認(rèn)10條
                        currentPage: currentPage, //當(dāng)前第幾頁(yè)
                        pageCount: 0, // 總頁(yè)數(shù)
                        pagerCount: 7, //設(shè)置最大頁(yè)碼按鈕數(shù)。 頁(yè)碼按鈕的數(shù)量，當(dāng)總頁(yè)數(shù)超過該值時(shí)會(huì)折疊（最好設(shè)置7）
                        useJump: true, //是否啟動(dòng)跳轉(zhuǎn)
                        useTotal:true, // 顯示所有條數(shù)
                        callback: function (value) {
                            currentPage = value.getCurrent()
                            getFastModuleItemList()
                        }
                    });

                } else {
                    layer.msg(datas.msg, { icon: 5 });
                }
            })
        }
    </script>
</body>

</html>

到了這里，關(guān)于jquery 封裝的分頁(yè)插件（包括上一頁(yè)，下一頁(yè)，跳轉(zhuǎn)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！