• 用此代码前需引入jquery文件
• jquery中创建通用方法可以用$.fn.extend的形式，也有另一种$.extend，但是引入的时候this不能指向调用者本身
• 第二部分的代码是调用第一部分写的方法

在$.fn.extend中新建方法

• 创建pageI方法，形参为arg，arg.pageCount为需要创建的页数，arg.jump为控制第几页显示的内容
• $(this)指向的调用者本身，如果$(this)是body，就是用append方法向$(this)中，中间的页数是通过传递的参数决定的，所以通过循环创建

$.fn.extend(
    {
        pageI(arg) {
            let pageCount = arg.pageCount || 1
            $(this).append(`<ul class="pager"> </ul>`)
            $('.pager').append(` <li class="home page">首页</li>
        <li class="pre page">上页</li>`)
            for (let n = 1; n <= pageCount; n++) {
                $('.pager').append(`<li class="item">${n}</li>`)
            }
            $('.pager').append(` <li class="next page">下页</li>
        <li class="last page">尾页</li>`)
            $('.item').eq(0).addClass('active')
            $('.pager .page.home,.pager .page.pre').addClass('disabled')
            let i = 1
            $('.pager').on('click', '.item', function () {
                $(this).addClass('active').siblings('.active').removeClass('active')
                i = parseInt($('.active').html())
            })

            $('.pager').on('click', '.page', function () {
                // console.log(i);
                if ($(this).hasClass('home')) {
                    i = 1
                } else if ($(this).hasClass('pre')) {
                    i = Math.max(i-1,1)
                } else if ($(this).hasClass('next')) {
                    if (i === pageCount) return
                    i++
                } else if ($(this).hasClass('last')) {
                    i = pageCount
                }
                console.log(i);

                $('.pager .item').eq(i - 1).addClass('active').siblings('.active').removeClass('active')
            })
            $('.pager').on('click', 'li', function () {
                $('.page').removeClass('disabled')
                if (i === 1) {
                    $('.pager .page.home,.pager .page.pre').addClass('disabled')
                } else if (i === pageCount) {
                    $('.pager .page.last,.pager .page.next').addClass('disabled')
                }
            arg.jump(i)
               
            })
        }
    }
)

调用方法

• 创建函数getData(i)，i控制显示第几页
• 调用方法pageI，输入需要的页数， jump(i)传递函数getData(i)，控制页数下标与ajax获取的值一致

 function getData(i) {
        $.get('./data.json', {
            pageSize: 2,
            pageIndex: i
        }, res => {
            console.log(res);
            
        })
    }
$('body').pageI({
        pageCount:5,
        jump(i){
            getData(i)
        }
    })

样式

 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            user-select: none;
        }

        ul {
            margin-top: 100px;
        }

        ul>li {
            float: left;
            margin: 0 10px;
            border: 1px solid red;
            padding: 3px 10px;
        }

        .active {
            background: orangered;
            color: white;
        }

        .disabled {
            background: #eee;
            color: #000;
            cursor: not-allowed;
            border: transparent 1px solid;
        }
    </style>