jQuery实现分页效果如下：完整代码如下：

效果如下：
完整代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container {
            width: 500px;
            height: 30px;
            margin: 20px;
            /* background-color: #ccc; */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container li {
            min-width: 30px;
            height: 30px;
            color: rgb(146, 146, 219);
            border: 1px solid rgb(146, 146, 219);
            border-radius: 3px;
            text-align: center;
            line-height: 30px;
            margin-left: 10px;
            cursor: pointer;
            user-select: none;
        }

        .container li:hover {
            background-color: rgb(146, 146, 219);
            color: #fff;
        }

        .container li.active {
            background-color: rgb(146, 146, 219);
            color: #fff;
        }

        .container li.ctrl {
            width: 80px;
            height: 30px;
        }

        .container li.ctrl.disabled {
            background-color: #eee;
            color: #cccccc;
            border: 1px solid #ccc;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <!-- <ul class="container">
        <li class="ctrl">首页</li>
        <li class="ctrl">上一页</li>
        <li class="active">1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li class="ctrl">下一页</li>
        <li class="ctrl">尾页</li>
    </ul> -->


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $(function () {

            let arr = ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"];

            function getPageCount(totalCount, pageSize) {
                let pageCount = Math.ceil((totalCount / pageSize));
                return pageCount;
            }
            // console.log(getPageCount(8,2));

            function getPageData(sourceData, pageIndex, pageSize) {
                let start = (pageIndex - 1) * pageSize;
                let end = start + pageSize;
                return sourceData.slice(start, end)
            }
            let pageCount = getPageCount(arr.length, 3);


            let index = 1;

            let ul = $("<ul/>").addClass("container");
            ul.append($(`
        <li class="ctrl first ">首页</li>
        <li class="ctrl prev ">上一页</li>
        `))

            for (let i = 0; i < pageCount; i++) {
                let li = $('<li/>').html(i + 1);
                if (i === 0) li.addClass("active")
                ul.append(li)
            }

            ul.append($(`
        <li class="ctrl next">下一页</li>
        <li class="ctrl last">尾页</li>
        `))
            $("body").append(ul);


            $("li:not(.ctrl)").click(function () {
                $(this).addClass("active").siblings(".active").removeClass("active");
                index = parseInt($(this).text());
                console.log(index)
                checkDisable()
            })

            $(".next").click(function () {
                if (index === pageCount) return;
                index++;
                checkDisable();
            })

            $(".prev").click(function () {
                if (index === 1) return;
                index--;
                checkDisable();
            });

            $(".first").click(function () {
                index = 1;
                checkDisable();
            })

            $(".last").click(function () {
                index = pageCount;
                checkDisable();
            })

            function checkDisable() {
                $(".container li:not(.ctrl)").eq(index - 1).addClass("active").siblings(".active")
                    .removeClass("active");
                $(".ctrl").removeClass("disabled");
                if (index === 1) {
                    $(".prev,.first").addClass("disabled");
                } else if (index === pageCount) {
                    $(".next,.last").addClass("disabled");
                    console.log(getPageData(arr,index,pageSize));
                }
            }
            checkDisable();
            console.log(getPageData(arr,index,pageSize));

        })
    </script>
</body>

</html>