当前位置:首页 > PHP

php分页效果实现

2026-04-03 10:43:30PHP

PHP 分页效果实现

数据库查询与分页逻辑

分页的核心是通过 SQL 的 LIMIT 子句限制每次查询的数据量。假设每页显示 10 条数据,当前页码为 $page

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

$sql = "SELECT * FROM articles LIMIT $offset, $itemsPerPage";
$result = $conn->query($sql);

计算总页数

需要查询总数据量以确定分页数量:

php分页效果实现

$totalItems = $conn->query("SELECT COUNT(*) FROM articles")->fetch_row()[0];
$totalPages = ceil($totalItems / $itemsPerPage);

生成分页导航

通过循环生成页码链接,并添加当前页高亮样式:

echo '<div class="pagination">';
for ($i = 1; $i <= $totalPages; $i++) {
    $active = $i == $page ? 'active' : '';
    echo "<a href='?page=$i' class='$active'>$i</a>";
}
echo '</div>';

样式优化建议

为分页导航添加基础 CSS 样式:

php分页效果实现

.pagination {
    margin: 20px 0;
}
.pagination a {
    padding: 8px 12px;
    border: 1px solid #ddd;
    margin-right: 5px;
}
.pagination a.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

高级分页功能

对于大量数据可分页时显示部分页码:

$range = 2; // 当前页前后显示范围
echo '<div class="pagination">';
if ($page > 1) echo "<a href='?page=1'>&laquo;</a>";

for ($i = max(1, $page - $range); $i <= min($page + $range, $totalPages); $i++) {
    $active = $i == $page ? 'active' : '';
    echo "<a href='?page=$i' class='$active'>$i</a>";
}

if ($page < $totalPages) echo "<a href='?page=$totalPages'>&raquo;</a>";
echo '</div>';

AJAX 分页实现

通过 jQuery 实现无刷新分页:

$(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    var page = $(this).attr('href').split('page=')[1];
    $.ajax({
        url: 'load_data.php',
        data: {page: page},
        success: function(data) {
            $('#content').html(data);
        }
    });
});

标签: 分页效果
分享给朋友:

相关文章

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

vue实现预览效果

vue实现预览效果

实现预览效果的常见方法 在Vue中实现预览效果可以通过多种方式完成,以下列举几种典型场景和对应的实现方案: 图片/文件预览 使用<input type="file">结合FileRead…

vue加载实现分页

vue加载实现分页

Vue 实现分页加载的方法 使用 Element UI 的分页组件 安装 Element UI 后,可以直接使用其分页组件。在模板中添加分页组件,并绑定相关事件和数据。 <template&g…

vue实现效果更新

vue实现效果更新

Vue 实现效果更新的方法 Vue 提供了多种方式实现动态效果更新,主要依赖其响应式系统和生命周期钩子。以下是几种常见的方法: 数据绑定与响应式更新 Vue 的核心是数据驱动视图。通过修改数据,视图…

vue实现旋转效果

vue实现旋转效果

使用CSS动画实现旋转 在Vue中可以通过CSS的@keyframes或transform属性实现旋转效果。在组件的<style>部分定义旋转动画: .rotate { animat…

vue实现搜索分页

vue实现搜索分页

实现搜索分页的基本思路 在Vue中实现搜索分页功能通常需要结合以下几个关键点:数据绑定、搜索过滤、分页逻辑处理。以下是一个完整的实现方案。 数据准备与绑定 定义数据列表和分页相关变量,通常包括当前页…