HTML实现php分页
HTML 实现 PHP 分页
数据库查询与分页逻辑
在 PHP 中,分页通常需要结合数据库查询和计算总页数。以下是一个基于 MySQL 的分页逻辑示例:
<?php
// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取当前页码
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$perPage = 10; // 每页显示记录数
// 计算总记录数和总页数
$total = $conn->query("SELECT COUNT(*) FROM your_table")->fetch_row()[0];
$totalPages = ceil($total / $perPage);
// 确保页码在有效范围内
$page = max(1, min($page, $totalPages));
$offset = ($page - 1) * $perPage;
// 查询当前页数据
$result = $conn->query("SELECT * FROM your_table LIMIT $offset, $perPage");
?>
HTML 分页显示
在 HTML 中渲染分页数据和分页导航:

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<!-- 其他表头 -->
</tr>
</thead>
<tbody>
<?php while ($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo htmlspecialchars($row['id']); ?></td>
<td><?php echo htmlspecialchars($row['name']); ?></td>
<!-- 其他数据列 -->
</tr>
<?php endwhile; ?>
</tbody>
</table>
<div class="pagination">
<?php if ($page > 1): ?>
<a href="?page=1">First</a>
<a href="?page=<?php echo $page - 1; ?>">Prev</a>
<?php endif; ?>
<?php for ($i = 1; $i <= $totalPages; $i++): ?>
<a href="?page=<?php echo $i; ?>" <?php if ($i == $page) echo 'class="active"'; ?>>
<?php echo $i; ?>
</a>
<?php endfor; ?>
<?php if ($page < $totalPages): ?>
<a href="?page=<?php echo $page + 1; ?>">Next</a>
<a href="?page=<?php echo $totalPages; ?>">Last</a>
<?php endif; ?>
</div>
CSS 样式示例
为分页导航添加基本样式:

.pagination {
margin-top: 20px;
display: flex;
gap: 5px;
}
.pagination a {
padding: 8px 12px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
}
.pagination a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.pagination a:hover:not(.active) {
background-color: #f1f1f1;
}
安全注意事项
-
始终对输出数据进行转义,防止 XSS 攻击:
echo htmlspecialchars($data); -
使用预处理语句防止 SQL 注入:
$stmt = $conn->prepare("SELECT * FROM your_table LIMIT ?, ?"); $stmt->bind_param("ii", $offset, $perPage); $stmt->execute(); $result = $stmt->get_result();
优化建议
- 对于大型数据集,考虑使用缓存机制存储总记录数
- 实现 AJAX 分页提升用户体验
- 添加页面跳转输入框方便用户直接导航






