jquery 网页分页代码

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在网页分页中，jQuery 可以用来动态地更新页面内容，从而提高用户体验。

基础概念

网页分页是一种将大量数据分割成多个页面的技术，每个页面显示一部分数据。这样可以避免一次性加载过多数据导致的性能问题，并且使用户能够更方便地浏览信息。

类型

客户端分页：所有数据一次性加载到客户端，然后通过 JavaScript 分割显示。
服务器端分页：每次只从服务器请求当前页面所需的数据。

应用场景

新闻网站：显示大量新闻文章。
电子商务网站：展示商品列表。
论坛系统：浏览帖子或回复。

示例代码（客户端分页）

以下是一个简单的 jQuery 客户端分页示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Pagination</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="content"></div>
    <div class="pagination">
        <button id="prev">Previous</button>
        <button id="next">Next</button>
    </div>

    <script>
        var data = []; // 假设这是从服务器获取的所有数据
        var itemsPerPage = 10;
        var currentPage = 1;

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

            var html = '';
            for (var i = 0; i < pageData.length; i++) {
                html += '<p>' + pageData[i] + '</p>';
            }
            $('#content').html(html);
        }

        $('#prev').click(function() {
            if (currentPage > 1) {
                currentPage--;
                displayData(currentPage);
            }
        });

        $('#next').click(function() {
            if ((currentPage * itemsPerPage) < data.length) {
                currentPage++;
                displayData(currentPage);
            }
        });

        // 初始化显示第一页数据
        displayData(currentPage);
    </script>
</body>
</html>