翻页jquery

基础概念

翻页（Pagination）是一种常见的网页设计技术，用于将大量数据分成多个页面显示，以提高用户体验和页面加载速度。jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，常用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。

类型

客户端翻页：数据一次性加载到客户端，通过 JavaScript 实现分页显示。
服务器端翻页：每次只请求当前页的数据，减轻服务器负担，适用于大数据量场景。

应用场景

电商网站：商品列表分页显示。
博客系统：文章列表分页显示。
论坛系统：帖子列表分页显示。

示例代码（客户端翻页）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Pagination Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .pagination a {
            margin: 0 5px;
            padding: 5px 10px;
            text-decoration: none;
            color: #333;
        }
        .pagination a.active {
            background-color: #007bff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- 数据将在这里显示 -->
    </div>
    <div class="pagination" 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 = 5;
            var totalPages = Math.ceil(data.length / itemsPerPage);
            var currentPage = 1;

            function renderPage(page) {
                var start = (page - 1) * itemsPerPage;
                var end = start + itemsPerPage;
                var pageData = data.slice(start, end);
                $("#content").html(pageData.join("<br>"));
            }

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

            $("#pagination a").click(function(e) {
                e.preventDefault();
                currentPage = parseInt($(this).data("page"));
                renderPage(currentPage);
                renderPagination();
            });

            renderPage(currentPage);
            renderPagination();
        });
    </script>
</body>
</html>