jquery 加载分页

基础概念

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

类型

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

应用场景

数据量较大的列表：如商品列表、新闻列表等。
需要快速响应的用户界面：如搜索结果、用户评论等。

示例代码

以下是一个简单的 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;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="data-list">
        <!-- 数据项将通过 JavaScript 动态加载 -->
    </ul>
    <div id="pagination">
        <!-- 分页按钮将通过 JavaScript 动态生成 -->
    </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 renderDataList() {
                var start = (currentPage - 1) * itemsPerPage;
                var end = start + itemsPerPage;
                var itemsToShow = data.slice(start, end);
                $("#data-list").empty().append(itemsToShow.map(function(item) {
                    return "<li>" + item + "</li>";
                }));
            }

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

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

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