jquery php分页加载

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。PHP 是一种广泛使用的开源服务器端脚本语言，尤其适用于 Web 开发。

分页加载是一种网页设计技术，用于将大量数据分成多个页面显示，以提高用户体验和页面加载速度。

类型

前端分页：所有数据一次性加载到前端，然后通过 JavaScript 进行分页显示。
后端分页：每次只从服务器请求当前页的数据，减少数据传输量。

应用场景

数据密集型网站：如电商网站的产品列表、新闻网站的文章列表等。
需要快速响应的界面：如仪表盘、实时数据监控等。

示例代码

后端（PHP）

<?php
// 假设数据库连接已经建立
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database_name";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$limit = 10;
$offset = ($page - 1) * $limit;

$sql = "SELECT * FROM table_name LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Name: " . $row["name"]. "<br>";
    }
} else {
    echo "0 结果";
}

// 获取总页数
$sql = "SELECT COUNT(*) as total FROM table_name";
$totalResult = $conn->query($sql);
$totalRow = $totalResult->fetch_assoc();
$totalPages = ceil($totalRow['total'] / $limit);

// 生成分页链接
for ($i = 1; $i <= $totalPages; $i++) {
    echo "<a href='?page=$i'>$i</a> ";
}

$conn->close();
?>

前端（jQuery）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页加载示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <div id="pagination"></div>

    <script>
        $(document).ready(function() {
            function loadPage(page) {
                $.ajax({
                    url: 'path_to_your_php_file.php',
                    type: 'GET',
                    data: { page: page },
                    success: function(data) {
                        $('#content').html(data);
                    }
                });
            }

            loadPage(1);

            $(document).on('click', 'a', function(e) {
                e.preventDefault();
                var page = $(this).text();
                loadPage(page);
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

分页链接不工作：
- 确保分页链接的 href 属性正确指向 PHP 文件，并且传递了正确的页码参数。
- 检查 JavaScript 事件绑定是否正确。

数据重复显示：
- 确保每次请求时都清空之前的内容，可以使用 $('#content').html(''); 清空内容。
分页逻辑错误：
- 检查 PHP 代码中的分页逻辑，确保 LIMIT 和 OFFSET 计算正确。
- 确保总页数计算正确，使用 ceil 函数向上取整。