jquery 分页特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 分页特效</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .page-item {
            display: inline-block;
            margin-right: 5px;
            padding: 5px 10px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .page-item.active {
            background-color: #007bff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="data-container">
        <!-- 数据展示区域 -->
    </div>
    <div id="pagination">
        <!-- 分页导航区域 -->
    </div>

    <script>
        $(document).ready(function() {
            var data = [
                "Item 1", "Item 2", "Item 3", "Item 4", "Item 5",
                "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"
            ];
            var itemsPerPage = 3;
            var totalPages = Math.ceil(data.length / itemsPerPage);
            var currentPage = 1;

            function renderData() {
                var start = (currentPage - 1) * itemsPerPage;
                var end = start + itemsPerPage;
                var itemsToShow = data.slice(start, end);
                $("#data-container").html(itemsToShow.join("<br>"));
            }

            function renderPagination() {
                var paginationHtml = "";
                for (var i = 1; i <= totalPages; i++) {
                    paginationHtml += `<div class="page-item ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</div>`;
                }
                $("#pagination").html(paginationHtml);
            }

            function initPagination() {
                renderData();
                renderPagination();

                $(".page-item").click(function() {
                    currentPage = parseInt($(this).data("page"));
                    renderData();
                    renderPagination();
                });
            }

            initPagination();
        });
    </script>
</body>
</html>