jquery 切换分页显示代码

基础概念

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

类型

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

传统分页：显示固定数量的页码，用户点击页码进行切换。
无限滚动：当用户滚动到页面底部时，自动加载更多内容。
动态分页：根据数据量动态生成页码，适用于数据量不固定的情况。

应用场景

分页显示广泛应用于各种需要展示大量数据的场景，如：

电商网站的订单列表
社交媒体的动态列表
新闻网站的文章列表
数据库查询结果

示例代码

以下是一个简单的 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>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="content">
        <!-- 数据内容 -->
    </div>
    <div id="pagination">
        <button id="prev">上一页</button>
        <span id="page-info"></span>
        <button id="next">下一页</button>
    </div>

    <script>
        $(document).ready(function() {
            let currentPage = 1;
            let totalPages = 10; // 假设总页数为10
            let pageSize = 5; // 每页显示5条数据

            function loadPage(page) {
                // 模拟从服务器获取数据
                let data = [];
                for (let i = (page - 1) * pageSize; i < page * pageSize; i++) {
                    data.push(`数据${i + 1}`);
                }

                $('#content').html(data.join('<br>'));
                $('#page-info').text(`第 ${page} 页 / 共 ${totalPages} 页`);
            }

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

            $('#next').click(function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    loadPage(currentPage);
                }
            });

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