jquery 页码

基础概念： jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在网页开发中，jQuery 常用于实现各种动态效果，包括分页功能。

优势：

简化代码：jQuery 提供了简洁的语法来选择 DOM 元素、处理事件和创建动画。
跨浏览器兼容性：它解决了不同浏览器之间的兼容性问题。
丰富的插件生态：有大量的第三方插件可供使用，如分页插件。

类型：

客户端分页：所有数据一次性加载到客户端，然后通过 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>
        .pagination {
            margin-top: 20px;
        }
        .pagination a {
            padding: 5px 10px;
            margin-right: 5px;
            border: 1px solid #ccc;
            text-decoration: none;
        }
        .pagination a.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</head>
<body>
    <ul id="itemList">
        <!-- 列表项将通过 jQuery 动态生成 -->
    </ul>
    <div class="pagination">
        <!-- 分页链接将通过 jQuery 动态生成 -->
    </div>

    <script>
        $(document).ready(function() {
            var itemsPerPage = 10; // 每页显示的项目数
            var currentPage = 1; // 当前页码
            var data = []; // 假设这是从服务器获取的数据数组

            // 初始化数据（模拟）
            for (var i = 1; i <= 100; i++) {
                data.push('Item ' + i);
            }

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

                $('#itemList').empty();
                for (var i = 0; i < pageData.length; i++) {
                    $('#itemList').append('<li>' + pageData[i] + '</li>');
                }
            }

            function setupPagination() {
                var totalPages = Math.ceil(data.length / itemsPerPage);
                $('.pagination').empty();

                for (var i = 1; i <= totalPages; i++) {
                    $('.pagination').append('<a href="#" class="' + (i === currentPage ? 'active' : '') + '">' + i + '</a>');
                }

                $('.pagination a').click(function(e) {
                    e.preventDefault();
                    currentPage = parseInt($(this).text());
                    displayItems(currentPage);
                    setupPagination(); // 更新分页链接状态
                });
            }

            displayItems(currentPage);
            setupPagination();
        });
    </script>
</body>
</html>

常见问题及解决方法：