jquery分页

function customPager($, window, document, undefined) {
    "use strict";
    var defaults = {
        pageIndex: 0,
        pageSize: 6,
        itemCount: 50,
        maxButtonCount: 7,
        prevText: "上一页",
        nextText: "下一页",
        buildPageUrl: null,
        onPageChanged: null
    };

    function Pager($ele, options) {
        if (typeof Pager.instance === 'object') {
            return Pager.instance
        }
        this.$ele = $ele;
        this.options = options = $.extend(defaults, options || {});
        this.init();
        Pager.instance = this
        return this
    }
    Pager.prototype = {
        constructor: Pager,
        init: function() {
            this.renderHtml();
            this.bindEvent();
        },
        renderHtml: function() {
            var options = this.options;

            options.pageCount = Math.ceil(options.itemCount / options.pageSize);
            var html = [];

            //生成上一页的按钮
            if (options.pageIndex > 0) {
                html.push('<a page="' + (options.pageIndex - 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.prevText + '</a>');
            } else {
                html.push('<span class="flip noPage">' + options.prevText + '</span>');
            }

            //这里是关键
            //临时的起始页码中间页码，当页码数量大于显示的最大按钮数时使用
            var tempStartIndex = options.pageIndex - Math.floor(options.maxButtonCount / 2) + 1;

            //计算终止页码，通过max计算一排按钮中的第一个按钮的页码，然后计算出页数量
            var endIndex = Math.min(options.pageCount, Math.max(0, tempStartIndex) + options.maxButtonCount) - 1;
            var startIndex = Math.max(0, endIndex - options.maxButtonCount + 1);

            // 第一页
            if (startIndex > 0) {
                html.push("<a href='" + this.buildPageUrl(0) + "' page='" + 0 + "'>1</a> ");
                html.push("<span>...</span>");
            }

            //生成页码按钮
            for (var i = startIndex; i <= endIndex; i++) {
                if (options.pageIndex == i) {
                    html.push('<span class="curPage">' + (i + 1) + '</span>');
                } else {
                    html.push('<a page="' + i + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '">' + (i + 1) + '</a>');
                }
            }

            // 最后一页
            if (endIndex < options.pageCount - 1) {
                html.push("<span>...</span> ");
                html.push("<a href='" + this.buildPageUrl(options.pageCount - 1) + "' page='" + (options.pageCount - 1) + "'>" + options.pageCount + "</a> ");
            }

            //生成下一页的按钮
            if (options.pageIndex < options.pageCount - 1) {
                html.push('<a page="' + (options.pageIndex + 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.nextText + '</a>');
            } else {
                html.push('<span class="flip noPage">' + options.nextText + '</span>');
            }

            this.$ele.html(html.join(""));
        },
        bindEvent: function() {
            var that = this;
            that.$ele.on("click", "a", function() {
                that.options.pageIndex = parseInt($(this).attr("page"), 10);
                that.renderHtml();
                that.options.onPageChanged && that.options.onPageChanged(that.options.pageIndex);
            })
        },
        buildPageUrl: function() {
            if ($.isFunction(this.options.buildPageUrl)) {
                return this.options.buildPageUrl(pageIndex);
            }
            return "javascript:;";
        },
        getPageIndex: function() {
            return this.options.pageIndex;
        },
        setPageIndex: function(pageIndex) {
            this.options.pageIndex = pageIndex;
            this.renderHtml();
        },
        setItemCount: function(itemCount) {
            this.options.pageIndex = 0;
            this.options.itemCount = itemCount;
            this.renderHtml();
        }
    };


    $.fn.pager = function(options) {
        options = $.extend(defaults, options || {});

        return new Pager($(this), options);
    }

}
export {
    customPager
}

新建一个js文件，把以上代码复制粘贴到该文件，在需要使用的文件导入customPager
如：import { customPager } from “…/…/xxx”

//使用分页
import { customPager } from "../../xxx"  

// 分页控件，html中需有分页标签，类名为pager
//<div class="pager"></div>)
let pageSize = 5
const initpage = (data) => {
    $(".pager")
        .pager({
            pageIndex: 0,
            pageSize: pageSize,
            itemCount: data.length,
            maxButtonCount: 5,
            onPageChanged: function(page) {
                page = page * pageSize
              	//切换页码触发
            }
        })
        .setPageIndex(0)//初始化时将页码设置为0，即第一页
};
//下面的data是表格的数据，请求拿到数据再执行下面两个方法
customPager(jQuery, window, document)
initpage(data)

→详情