jquery 翻页

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。翻页功能通常用于分页显示大量数据，以提高用户体验和页面加载速度。

类型

客户端分页：数据一次性加载到客户端，通过 JavaScript 实现分页效果。
服务器端分页：每次请求只加载当前页的数据，减轻服务器和客户端的负担。

应用场景

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

示例代码

客户端分页示例

<!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>
</head>
<body>
    <ul id="data-list">
        <!-- 数据项 -->
    </ul>
    <div id="pagination">
        <!-- 分页按钮 -->
    </div>

    <script>
        $(document).ready(function() {
            var data = [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' },
                // 更多数据...
            ];

            var itemsPerPage = 10;
            var totalPages = Math.ceil(data.length / itemsPerPage);

            function renderPage(page) {
                var start = (page - 1) * itemsPerPage;
                var end = start + itemsPerPage;
                var itemsToShow = data.slice(start, end);

                $('#data-list').empty();
                $.each(itemsToShow, function(index, item) {
                    $('#data-list').append('<li>' + item.name + '</li>');
                });

                $('#pagination').empty();
                for (var i = 1; i <= totalPages; i++) {
                    $('#pagination').append('<button class="page-btn" data-page="' + i + '">' + i + '</button>');
                }

                $('.page-btn').click(function() {
                    renderPage($(this).data('page'));
                });
            }

            renderPage(1);
        });
    </script>
</body>
</html>

服务器端分页示例

假设后端提供了一个 API /api/data?page=1&limit=10，返回当前页的数据。

<!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>
</head>
<body>
    <ul id="data-list">
        <!-- 数据项 -->
    </ul>
    <div id="pagination">
        <!-- 分页按钮 -->
    </div>

    <script>
        $(document).ready(function() {
            var currentPage = 1;
            var limit = 10;

            function fetchData(page) {
                $.ajax({
                    url: '/api/data',
                    method: 'GET',
                    data: { page: page, limit: limit },
                    success: function(response) {
                        renderData(response.data);
                        renderPagination(response.totalPages);
                    }
                });
            }

            function renderData(data) {
                var itemsHtml = '';
                $.each(data, function(index, item) {
                    itemsHtml += '<li>' + item.name + '</li>';
                });
                $('#data-list').html(itemsHtml);
            }

            function renderPagination(totalPages) {
                var paginationHtml = '';
                for (var i = 1; i <= totalPages; i++) {
                    paginationHtml += '<button class="page-btn" data-page="' + i + '">' + i + '</button>';
                }
                $('#pagination').html(paginationHtml);

                $('.page-btn').click(function() {
                    currentPage = $(this).data('page');
                    fetchData(currentPage);
                });
            }

            fetchData(currentPage);
        });
    </script>
</body>
</html>