PHP分页条，和下拉加载更多

7K+

一言准备中...

PHP分页条与下拉加载更多实现，指南分页条的实现‘’

分页条是Web开发中常见的功能，用于将大量数据分割成多个页面显示。以下是PHP实现分页条的基本步骤：

<?php
// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');

// 获取总记录数
$total_query = "SELECT COUNT(*) as total FROM products";
$total_result = $conn->query($total_query);
$total_row = $total_result->fetch_assoc();
$total_records = $total_row['total'];

// 设置分页参数
$per_page = 10;
$total_pages = ceil($total_records / $per_page);
$current_page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($current_page - 1) * $per_page;

// 获取当前页数据
$query = "SELECT * FROM products LIMIT $offset, $per_page";
$result = $conn->query($query);
?>

<!-- 显示数据 -->
<div class="items">
    <?php while($row = $result->fetch_assoc()): ?>
        <div class="item"><?= htmlspecialchars($row['name']) ?></div>
    <?php endwhile; ?>
</div>

<!-- 分页导航 -->
<div class="pagination">
    <?php if($current_page > 1): ?>
        <a href="?page=1">首页</a>
        <a href="?page=<?= $current_page - 1 ?>">上一页</a>
    <?php endif; ?>

    <?php for($i = 1; $i <= $total_pages; $i++): ?>
        <a href="?page=<?= $i ?>" <?= $i == $current_page ? 'class="active"' : '' ?>>
            <?= $i ?>
        </a>
    <?php endfor; ?>

    <?php if($current_page < $total_pages): ?>
        <a href="?page=<?= $current_page + 1 ?>">下一页</a>
        <a href="?page=<?= $total_pages ?>">末页</a>
    <?php endif; ?>
</div>

下拉加载更多的实现

下拉加载更多(无限滚动)是现代Web应用中流行的分页方式，提供更流畅的用户体验。

前端实现(HTML/JavaScript)

<div id="items-container">
    <!-- 初始加载的项目会显示在这里 -->
</div>
<div id="loading" style="display:none;">加载中...</div>

<script>
let page = 1;
let isLoading = false;

window.addEventListener('scroll', function() {
    if (isLoading) return;

    // 检查是否滚动到接近底部
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
        loadMore();
    }
});

function loadMore() {
    isLoading = true;
    document.getElementById('loading').style.display = 'block';

    fetch(`load_more.php?page=${++page}`)
        .then(response => response.text())
        .then(data => {
            document.getElementById('items-container').innerHTML += data;
            document.getElementById('loading').style.display = 'none';
            isLoading = false;
        });
}
</script>

后端实现(load_more.php)

<?php
header('Content-Type: text/html');

$conn = new mysqli('localhost', 'username', 'password', 'database');
$per_page = 10;
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * $per_page;

$query = "SELECT * FROM products LIMIT $offset, $per_page";
$result = $conn->query($query);

while($row = $result->fetch_assoc()): ?>
    <div class="item"><?= htmlspecialchars($row['name']) ?></div>
<?php endwhile;