jquery页码

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 Web 开发中，jQuery 经常被用来简化 DOM 操作和事件处理。

页码通常用于分页显示大量数据，以便用户能够更方便地浏览和查找信息。在 jQuery 中，可以通过添加页码按钮并绑定点击事件来实现分页功能。

类型

jQuery 分页主要有以下几种类型：

静态分页：在页面加载时生成所有页码，适用于数据量较小的情况。
动态分页：根据数据量动态生成页码，适用于数据量较大的情况。
无限滚动：通过滚动页面加载更多内容，适用于无限滚动列表。

应用场景

jQuery 分页常用于以下场景：

数据列表：如商品列表、文章列表等。
搜索结果：如搜索引擎的搜索结果分页。
用户管理：如用户列表的分页显示。

示例代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 分页示例</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 button {
            margin: 0 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- 数据内容 -->
    </div>
    <div class="pagination" id="pagination">
        <!-- 页码按钮 -->
    </div>

    <script>
        $(document).ready(function() {
            var data = [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' },
                { id: 3, name: 'Item 3' },
                // 更多数据...
            ];
            var itemsPerPage = 10;
            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').empty();
                $.each(pageData, function(index, item) {
                    $('#content').append('<div>' + item.name + '</div>');
                });

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

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

                $('.page-btn[data-page="' + currentPage + '"]').addClass('active');
            }

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