jquery 封装的分页插件（包括上一页，下一页，跳转）

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

    //配置参数
    var defaults = {
        total: 0, //数据总条数
        pageSize: 10, //每页显示的条数,默认10条
        currentPage: 1, //当前第几页
        pageCount:0, // 总页数
        pagerCount: 7, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
        useJump: false, //是否启动跳转
        useTotal:false,// 显示所有条数
        callback: function () {} //回调
    };

    var Pagination = function (element, options) {
        //全局变量
        var opts = options, //配置
            current, //当前页
            $document = $(document),
            $obj = $(element); //容器
            
            opts.pagerCount = 7;
        /**
         * 设置总页数
         * @param {int} page 页码
         * @return opts.pageCount 总页数配置
         */
        this.setPageCount = function (page) {
            return opts.pageCount = page;
        };

        /**
         * 获取总页数
         * 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之为0
         * @return {int} 总页数
         */
        this.getPageCount = function () {
            return opts.total && opts.pageSize ? Math.ceil(parseInt(opts.total) / opts.pageSize) : opts.pageCount;
        };

        /**
         * 获取当前页
         * @return {int} 当前页码
         */
        this.getCurrent = function () {
            return current;
        };

        /**
         * 填充数据
         * @param {int} 页码
         */
        this.filling = function (index) {
            var html = '';
            if(opts.total>0){
	            current = parseInt(index) || parseInt(opts.currentPage); //当前页码
	            var pageCount = this.getPageCount(); //获取的总页数
	            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){
	               // 这是表明超过了设置最大页码按钮数
	               // 1.以当前页码为中心,获取可加减的距离（最大页码按钮数-1）/2，
	               const stepSize = (opts.pagerCount-1)/2; // 获取步长
	               let start = 0;
	               let end = 0;
	               // 先判断他的起始点
	               if(pageCount-current>stepSize){
	                // 如果当前页减去第一页大于步长，那么就以current为中心
	                if(current-1>stepSize){
	                    start= current-stepSize+1
	                    end = current+stepSize-1
	                }
	                // 如果当前页减去第一页小于或等于步长
	                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 获取最后页码到当前页的距离，用来计算剩下的步长
	                        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'>上一页</span>"
	                }
	               // 如果开始大于1，那么就要添加1和省略号
	               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>"
	               }
	               // 如果结束小于总页数，那么就要添加总页数结束和添加省略号
	               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 {
	               // 这是总页数pageCount小于设置最大页码按钮数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'>下一页</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(); //总页数
            var index = 1;
            // 点击跳转指定页
            $obj.off().on('click', '.s-count', function () {
                index = $(this).html()
                that.filling(index);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            //输入跳转的页码
            $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);
            });
            //回车跳转指定页码
            $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);
                }
            });
            // 下一页
            $obj.on('click', '.s-next', function () {
                current = current + 1
                that.filling(current);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            // 上一页
            $obj.on('click', '.s-up', function () {
                current = current - 1
                that.filling(current);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            // 第二个省略号
            $obj.on('mouseenter', '.s-sl-two', function () {
                $('.s-sl-two').html(">>");
            });
            // 下一页更多
            $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);
            });

            // 第一个省略号
            $obj.on('mouseenter', '.s-sl-one', function () {
                $('.s-sl-one').html("<<");
            });
            // 上一页更多
            $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将两个对象合并
        var options = $.extend({}, defaults, parameter);
        return this.each(function () {
            var pagination = new Pagination(this, options);
            callback(pagination);
        });
    };

}));

cs.html文章来源地址https://www.toymoban.com/news/detail-458102.html

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

<head>
    <meta charset="UTF-8">
    <title>pagination.js - 分页</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="//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, //数据总条数
                        pageSize: pageSize, //每页显示的条数,默认10条
                        currentPage: currentPage, //当前第几页
                        pageCount: 0, // 总页数
                        pagerCount: 7, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠（最好设置7）
                        useJump: true, //是否启动跳转
                        useTotal:true, // 显示所有条数
                        callback: function (value) {
                            currentPage = value.getCurrent()
                            getFastModuleItemList()
                        }
                    });

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

</html>

到了这里，关于jquery 封装的分页插件（包括上一页，下一页，跳转）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！