jquery 实现分页器 kbb-pagination 实现分页 javascript 分页

使用方法：

1. 写一个 <div class="kbb-pagination"></div>
2. 如果一个页面，需要多个分页器，记得指定自定义的类名，例如：
   这里使用了 mypage 指定了分页器元素，
   使用divi 指定了分页器样式（可以参考css部分的 .kbb-pagination.divi {} 来自定义样式哦！目前支持修改分页器 颜色 和 尺寸）

html 部分

<div class="kbb-pagination my-page divi"></div>

pagination 方法使用：

pagination({
    selfSelector: '.my-page',     // 手动自定义一个分页器类名，其会直接添加到 .pagination 元素上
    data: data,                   // 需要分页渲染的数据
    callback:                     // 回调函数，可以获取到下一页、当前页、需要渲染的数据进行操作
        function (nextPage, curPage, data) {
                                  // nextPage = 下一页
                                  // curPage  = 当前页
                                  // data 为参数 data 传入的值
        }
})

js 分页器源码 部分

/**
 * 
 * @param {String} selfSelector 自定义的分页器选择器名
 * @param {Object} data 数据（包含详细数据 与 分页 ，即为接口返回的 data 值） 
 * @param {Function} callback // 返回三个参数：nextPage: 下一页，  curPage: 当前页，  data:上面的data， 
 */

// 代码库之创建分页器
function pagination({
    selfSelector = "",
    data = {
        index: 1,
        list: [],
        totalCount: 1,
        limit: 9,
    },
    callback = function (nextPage, curPage, data) { }
} = {}) {

    // 判断是否存在相同的元素：
    console.log($(selfSelector))
    if ($(selfSelector).length > 1) {
        console.error('请保证每个分页器 .kbb-pagination 拥有不同类名！');
    }

    var curPage = 1;
    callback = callback || function () { }

    init(selfSelector)


    var page = Math.ceil(data.totalCount / data.limit)

    // 点击页码切换
    $(document).on('click', selfSelector + ' ' + '.kbb-click-btn', function () {
        curPage = parseInt($(this).html())
        pageChange(data, curPage)
    })


    // 点击向后切换
    $(document).on('click', selfSelector + ' ' + '.kbb-page-next', function () {
        if (curPage < page) {
            curPage++;
            pageChange(data, curPage)
        }
    })

    // 点击向前切换
    $(document).on('click', selfSelector + ' ' + '.kbb-page-prev', function () {
        if (curPage > 1) {
            curPage--;
            pageChange(data, curPage)
        }
    })

    // 点击向前跳3格
    $(document).on('click', selfSelector + ' ' + '.kbb-page-item-prev', function () {

        if (curPage > 3 && curPage <= 5) {
            curPage = 3;
        } else if (curPage > 5) {
            curPage -= 3
        }

        pageChange(data, curPage)
    })

    // 点击向后跳3格
    $(document).on('click', selfSelector + ' ' + '.kbb-page-item-next', function () {

        if (curPage < page - 2 && curPage > page - 5) {
            curPage = page - 3
        } else if (curPage <= page - 5) {
            curPage += 3
        }

        pageChange(data, curPage)
    })



    function init(selfSelector) {
        selfSelector = selfSelector || ''
        var pagination = $('.kbb-pagination' + selfSelector)
        var paginationWrap = $('<div class="kbb-pagination-wrap"></div>')
        console.log(paginationWrap)
        paginationWrap.append($(
            '<div class="kbb-page-prev hide">&lt;</div>'
            + '     <div class="kbb-click-btn kbb-page-first"></div>'
            + '     <div class="kbb-page-item-prev hide">...</div>'
            + '     <div class="kbb-page-list">'
            + '     </div >'
            + '<div class=" kbb-page-item-next hide">...</div>'
            + '<div class="kbb-click-btn kbb-page-last hide"></div>'
            + '<div class="kbb-page-next hide">&gt;</div>'
        ))
        pagination.append(paginationWrap)

    }

    // 创建、切换页码操作
    setPagination(data)
    function setPagination(data) {

        // 定义中间数字段的首尾：
        var start = 0
        var end = 0

        // 设置首尾两个数字
        setPage(1, page)

        // 设置中间 list 

        // 
        if (page === 1) {
            $(selfSelector + ' ' + '.kbb-page-first').addClass('active')
            return
        }
        $(selfSelector + ' ' + '.kbb-page-last').removeClass('hide')
        // 如果页码小于 8  则全部展示
        if (page < 8) {


            start = 2
            end = page

            // 如果页码等于 8 则 根据 curPage 选择性展示 左或右 省略框
        } else if (page === 8) {

            if (curPage <= 4) {
                showPageNext()
                start = 2
                end = 7
            } else {
                start = 3
                end = 8
                showPagePrev()
            }
        } else {
            // 展示双省略
            showPageBoth()

            if (curPage <= 4 || page - 4 < 5) {
                showPageNext()
                start = 2, end = 8
            } else if (curPage >= page - 3) {
                showPagePrev()
                start = page - 6;
                end = page
            } else {
                start = curPage - 2
                end = curPage + 3
            }
        }
        setPageList(start, end)

        setActivePage()
    }

    // 突出当前页
    function setActivePage() {
        var kbbBtnList = $(selfSelector + ' ' + '.kbb-click-btn')
        kbbBtnList.removeClass('active')
        for (var i = 0; i < kbbBtnList.length; i++) {
            var item = $(kbbBtnList[i])
            if (parseInt(item.html()) === parseInt(curPage)) {
                item.addClass('active')
                break
            }
        }
    }

    // 展示快速切换按钮
    function showPageBtn() {
        $(selfSelector + ' ' + '.kbb-page-next').removeClass('hide')
        $(selfSelector + ' ' + '.kbb-page-prev').removeClass('hide')
    }

    // 隐藏快速切换按钮
    function hidePageBtn() {
        $(selfSelector + ' ' + '.kbb-page-next').addClass('hide')
        $(selfSelector + ' ' + '.kbb-page-prev').addClass('hide')
    }

    // 只展示左侧省略号
    function showPagePrev() {
        showPageBtn()
        $(selfSelector + ' ' + '.kbb-page-item-prev').removeClass('hide')
        $(selfSelector + ' ' + '.kbb-page-item-next').addClass('hide')
    }

    // 只展示右侧省略号
    function showPageNext() {
        showPageBtn()
        $(selfSelector + ' ' + '.kbb-page-item-next').removeClass('hide')
        $(selfSelector + ' ' + '.kbb-page-item-prev').addClass('hide')
    }

    // 展示双侧省略号
    function showPageBoth() {
        showPageBtn()
        $(selfSelector + ' ' + '.kbb-page-item-next').removeClass('hide')
        $(selfSelector + ' ' + '.kbb-page-item-prev').removeClass('hide')
    }

    // 设置首尾页：
    function setPage(start, end) {
        $(selfSelector + ' ' + '.kbb-page-first').html(start)
        $(selfSelector + ' ' + '.kbb-page-last').html(end)
    }

    // 设置中间的页码
    function setPageList(start, end) {
        var list = $(selfSelector + ' ' + '.kbb-page-list')
        list.empty()
        for (var i = start; i < end; i++) {
            var el = $('<div class="kbb-click-btn kbb-page-item">' + i + '</div>')
            list.append(el)
        }
    }

    function pageChange(data, curPage) {
        setPagination(data)
        curPage = parseInt(curPage)
        var nextPage = 1
        if (curPage < page) {
            nextPage = curPage + 1
        } else {
            nextPage = page
        }
        callback(nextPage, curPage, data)
    }
}

css 部分

       * {
            margin: 0;
            padding: 0;
        }

        body {
            text-align: center;
        }

        .kbb-pagination {

            display: block;
            --default-size: 40px;
            --default-color: #7ab700;
            --default-fontsize: 14px;
            text-align: center;
            font-size: 0;
        }

        .kbb-pagination .kbb-pagination-wrap {
            display: inline-block;
            font-size: var(--default-fontsize);
        }

        .kbb-pagination.divi {
            --default-size: 34px;            // 自定义分页器大小
            --default-color: #ea9624;        // 自定义分页器主题颜色（会改变边框和背景色）
        }


        .kbb-page-list {
            float: left;
        }

        .kbb-page-list::after,
        .kbb-pagination-wrap::after {
            content: ' ';
            display: block;
            clear: both;
        }

        .kbb-pagination .kbb-page-item,
        .kbb-pagination .kbb-page-last,
        .kbb-pagination .kbb-page-first,
        .kbb-pagination .kbb-page-prev,
        .kbb-pagination .kbb-page-next,
        .kbb-pagination .kbb-page-item-prev,
        .kbb-pagination .kbb-page-item-next {
            float: left;
            width: var(--default-size);
            height: var(--default-size);
            line-height: var(--default-size);
            text-align: center;
            background-color: var(--default-color);
            color: #fff;
            margin: 0 3px;
            cursor: pointer;
            border: 1px solid var(--default-color);
        }

        .kbb-click-btn.active {
            color: var(--default-color);
            background: #fff;
            box-shadow: 0 0 2px var(--default-color) inset;
        }

        .kbb-pagination .hide {
            display: none !important;
        }

        .show-box {
            display: inline-block;
            font-size: 0;
            text-align: left;
            height: 600px;
        }

        .show-box .box-item {
            display: inline-block;
            width: 80px;
            height: 50px;
            font-size: 12px;
            line-height: 50px;
            text-align: center;
            box-shadow: 0 0 10px red inset;
            border-radius: 5px;
            margin: 3px;
        }