一、案例演示：
二、php 代码
<?php
$servername = "localhost"; // MySQL服务器名称或IP地址
$username = "root"; // MySQL用户名
$password = "123456"; // MySQL密码
$dbname = "test"; // 要连接的数据库名称
$port = "3307"; // 要连接的数据库名称
// 创建连接
$dbc = new mysqli($servername, $username, $password, $dbname, $port);
// 检查连接是否成功
if ($dbc->connect_error) {
die("连接失败: " . $dbc->connect_error);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<style>
body {
width: 100%;
overflow: hidden;
background: url("background.jpeg") no-repeat;
background-size: cover;
}
.table-container {
width: 80%;
margin: 0 auto;
}
table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color:
}
.pagination {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1 style="text-align: center"><strong>分页</strong></h1>
<div class="table-container">
<table class="table table-hover">
<tr>
<th>id</th>
<th>姓名</th>
</tr>
<?php
// 定义每页显示的记录数
$pageSize = 10;
// 获取当前页码，默认为第一页
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
// 计算当前页码对应的记录偏移量
$offset = ($page - 1) * $pageSize;
$sql = "SELECT * FROM page order by id asc LIMIT $offset, $pageSize";
$res = mysqli_query($dbc, $sql);
// 计算总记录数
$totalSql = "SELECT COUNT(*) AS total FROM page";
$totalResult = mysqli_query($dbc, $totalSql);
$totalRow = mysqli_fetch_assoc($totalResult);
$total = $totalRow['total'];
// 计算总页数
$totalPages = ceil($total / $pageSize);
foreach ($res as $row) {
echo "<tr>";
echo "<td>{$row['id']}</td>";
echo "<td>{$row['name']}</td>";
echo "</tr>";
}
?>
</table>
</div>
<div style="text-align: center; margin-top: 20px;">
<ul class="pagination">
<?php
// 生成分页链接
for ($i = 1; $i <= $totalPages; $i++) {
// 根据当前页添加特殊样式
$activeClass = ($i == $page) ? 'active' : '';
echo "<li class='$activeClass'><a href='index.php?page=$i'>$i</a></li>";
}
?>
</ul>
</div>
</body>
</html>
