简介
在 PHP 分页导航的实践中,需要注意的细节真的很多,相对之前使用框架来做复杂太多。通过自己的慢慢学习还是把整个分页做下来,编辑和删除的交互也做好,如果 ajax 技术牛逼,效果更佳。
代码演示
1、connect.php 连接数据库代码
$dsn = "mysql:host=localhost;dbname=localhost;charset=utf8;port=3306";
$username = 'root';
$password = 'root';
/* 连接 */
try {
$pdo = new PDO($dsn, $username, $password);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch (Exception $e) {
die($e->getMessage());
}
2、pages.php 用户列表分页代码
<?php
/* 连接数据库 */
require 'connect.php';
/* 获取当前页码 */
$page = isset($_GET['page']) ? $_GET['page'] : 1;
/* 获取动作 */
$action = isset($_GET['action']) ? $_GET['action'] : '';
/* 获取用户 ID */
$getId = isset($_GET['id']) ? $_GET['id'] : '';
/* 通过 ID 获取用户名称 */
if ($getId && $action != 'dodelete') {
$userSql = "SELECT * FROM `users` WHERE `ID`={$getId}";
$getUser = $pdo->query($userSql)->fetchAll();
$getName = array_pop($getUser)['display_name'];
}
/***************************************************************
* 获取用户数据
**************************************************************/
/* 获取每页显示数量 */
$num = 10;
/* 获取总页数 */
$sql = "SELECT CEIL( COUNT(`id`)/{$num} ) AS `total` FROM `users`";
$pages = $pdo->query($sql)->fetch()['total'];
/* 偏移量 */
$offset = $num * ($page - 1);
/* 当前数据 */
$sql = "SELECT * FROM `users` LIMIT {$num} OFFSET {$offset} ";
$users = $pdo->query($sql)->fetchAll();
/***************************************************************
* 获取用户数据 end
**************************************************************/
/***************************************************************
* 获取分页数据
**************************************************************/
/* 显示多少分页 */
$showPages = 9;
/* 开始页 */
$startPage = 1;
/* 结束页 */
$endPage = $pages;
/* 偏移量,不能小于 $startendOffset 的值 */
$offsetPage = ($showPages - 1) / 2;
/* 前后页码各偏移3=前后各留出两个页码+一个省略的页码 */
$startendOffset = 3;
/* 最后留出的页码 */
$endOffsetPage = $offsetPage + $startendOffset;
/* 最后起始页码 */
$endStartPage = $offsetPage * 2;
// 只有当前分页条数量 < 总页数, 才有必要显示出省略标记
if ($showPages < $pages) {
if ($page > $offsetPage + $startendOffset) {
$startOmit = '...';
}
/* 当前页大于偏移量 */
if ($page > $offsetPage + $startendOffset) {
$startPage = $page - $offsetPage;
$endPage = $page + $offsetPage;
if ($endPage > $pages) {$endPage = $pages;}
} else {
$startPage = 1;
$endPage = $showPages;
}
/* 当前页+偏移量大于部页数 */
if ($page + $offsetPage > $pages) {
$startPage = $startPage - ($page + $offsetPage - $endPage);
}
/* 当前页码<=总页码-最后留出的页码 */
if ($page <= $pages - $endOffsetPage) {
/* 总页码>显示页码,当前页码+偏移量<总页码 */
if ($pages > $showPages && $page + $offsetPage < $pages) {
/* 显示省略 */
$endOmit = '...';
}
} else {
/* 开始页码=总页码-最后起始页码 */
$startPage = $pages - $endStartPage;
$endPage = $pages;
}
}
/***************************************************************
* 获取分页数据 end
**************************************************************/
/***************************************************************
* 输出提示
**************************************************************/
/* 循环 */
switch ($action) {
/* 编辑 */
case 'doedit':
if ($getId) {
$hint = sprintf('<strong>%s</strong> 用户资料更新成功!', $getName);
} else {
$hint = '没有用户资料被更新!';
}
break;
/* 删除 */
case 'dodelete':
if ($getId) {
$hint = '用户删除成功!';
} else {
$hint = '没有用户被删除!';
}
break;
}
/***************************************************************
* 输出提示 end
**************************************************************/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://yfdxs.com/wp-content/themes/lensnews/assets/images/favicon.jpg" rel="shortcut icon" />
<link rel="stylesheet" href="style.css">
<title>分页</title>
</head>
<body>
<div class="container">
<table class="user-table">
<!-- 标题 -->
<caption>用户列表</caption>
<!-- 表头 -->
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>网站</th>
<th>注册时间</th>
<th>操作</th>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<?php foreach ($users as $key => $user):
$user_url = $user['user_url'];
$user_url = $user['user_url'] ? '<a href="' . $user_url . '" target="_blank">' . $user_url . '</a>' : '该用户没有网站';
$user_email = $user['user_email'];
$user_email = $user_email ? $user_email : '该用户没有邮箱';
?>
<tr>
<td><?php echo $user['ID']; ?></td>
<td><?php echo $user['display_name']; ?></td>
<td><?php echo $user_email; ?></td>
<td><?php echo $user_url; ?></td>
<td><?php echo $user['user_registered']; ?></td>
<td>
<button class="button edit"
onclick="location.href='handle.php?page=<?php echo $page ?>&action=edit&id=<?php echo $user['ID'] ?>'">编辑</button>
<button class="button delete"
onclick="location.href='handle.php?page=<?php echo $page ?>&action=delete&id=<?php echo $user['ID'] ?>'">删除</button>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<!-- 分页 -->
<?php if ($pages > 1): $php_self = $_SERVER['PHP_SELF'];?>
<div class="pagination">
<!-- 当前页码大于1才显示 -->
<?php if ($page > 1): ?>
<!-- 首页 -->
<a href="<?php echo $php_self . '?page=1'; ?>" class="page">首页</a>
<!-- 上一页 -->
<?php $prev = ($page == 1) ? 1 : $page - 1;?>
<a href="<?php echo $php_self . '?page=' . $prev; ?>" class="page">上一页</a>
<?php endif;?>
<!-- 前两页 -->
<?php if ($page > $offsetPage + $startendOffset): ?>
<!-- 循环 -->
<?php for ($i = 1; $i <= 2; $i++): $page_url = sprintf('%s?page=%s', $php_self, $i);?>
<a href="<?php echo $page_url; ?>" class="page"><?php echo $i; ?></a>
<?php endfor;?>
<?php endif;?>
<!-- 省略 -->
<?php if (isset($startOmit)): ?> <span class="page"><?php echo $startOmit; ?></span> <?php endif;?>
<!-- 循环 -->
<?php for ($i = $startPage; $i <= $endPage; $i++):
$page_url = sprintf('%s?page=%s', $php_self, $i);
$active = ($page == $i) ? ' active' : '';?>
<a href="<?php echo $page_url; ?>" class="page<?php echo $active; ?>"><?php echo $i; ?></a>
<?php endfor;?>
<!-- 循环 end -->
<!-- 省略 -->
<?php if (isset($endOmit)): ?> <span class="page"><?php echo $endOmit; ?></span> <?php endif;?>
<!-- 后两页 -->
<?php if ($page < $pages - $offsetPage - 2): ?>
<!-- 循环 -->
<?php for ($i = $pages - 1; $i <= $pages; $i++):
$page_url = sprintf('%s?page=%s', $php_self, $i);
?>
<a href="<?php echo $page_url; ?>" class="page"><?php echo $i; ?></a>
<?php endfor;?>
<?php endif;?>
<!-- 当前页码小于总页码才显示 -->
<?php if ($page < $pages): ?>
<!-- 下一页 -->
<?php $next = ($page >= $pages) ? $pages : $page + 1;?>
<a href="<?php echo $php_self . '?page=' . $next; ?>" class="page">下一页</a>
<!-- 尾页 -->
<a href="<?php echo $php_self . '?page=' . $pages; ?>" class="page"> 尾页</a>
<?php endif;?>
<!-- 页面跳转 -->
<form action="" method="get" class="jump-page">
<input type="number" name="page" min="1" max="<?php echo $pages ?>">
<button class="button jump">跳转</button>
</form>
</div>
<?php endif;?>
<!-- 提示,3秒后移除提示 -->
<?php echo isset($hint) ? '<div class="hint">' . $hint . '</div><script>window.onload=function(){ var hint = document.getElementsByClassName("hint")[0]; setTimeout( function(){hint.remove()}, 3000); }</script>' : ''; ?>
</div>
</body>
</html>
edit.php 编辑用户信息代码
<?php
/* 获取要编辑的用户信息 */
$user = $pdo->query("SELECT * FROM `users` WHERE `ID`={$id}")->fetch();
/* 链接 */
$user_url = $user['user_url'];
$user_url = $user['user_url'] ?? '';
/* 邮箱 */
$user_email = $user['user_email'];
$user_email = $user_email ?? '';
/* 获取当前页码 */
$page = isset($_GET['page']) ? $_GET['page'] : 1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>编辑用户信息</title>
</head>
<body>
<div class="container">
<div class="edit-form">
<h3>编辑用户信息</h3>
<form action="<?php echo $_SERVER['PHP_SELF'] . '?action=doedit&page=' . $page . '&id=' . $id ?>"
method="post">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" value="<?php echo $user['display_name'] ?>" autofocus>
</div>
<div>
<label for="email">邮箱:</label>
<input type="text" id="email" name="email" value="<?php echo $user_email ?>">
</div>
<div>
<label for="url">网站:</label>
<input type="text" id="url" name="url" value="<?php echo $user_url ?>">
</div>
<div>
<input type="hidden" name="id" value="<?php echo $user['ID'] ?>">
<button class="button save">保存更改</button>
</div>
</form>
</div>
</div>
</body>
</html>
4、delete.php 删除用户代码
<?php
/* 获取要编辑的用户信息 */
$user = $pdo->query("SELECT * FROM `users` WHERE `ID`={$id}")->fetch();
/* 链接 */
$user_url = $user['user_url'];
$user_url = $user['user_url'] ? '<a href="' . $user_url . '" target="_blank">' . $user_url . '</a>' : '该用户没有网站';
/* 邮箱 */
$user_email = $user['user_email'];
$user_email = $user_email ? $user_email : '该用户没有邮箱';
/* 获取当前页码 */
$page = isset($_GET['page']) ? $_GET['page'] : 1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>删除用户</title>
</head>
<body class="delete-user">
<div class="container">
<table class="user-table">
<!-- 标题 -->
<caption>删除 <?php echo $user['display_name']; ?></caption>
<!-- 表头 -->
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>网站</th>
<th>注册时间</th>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td><?php echo $user['ID']; ?></td>
<td><?php echo $user['display_name']; ?></td>
<td><?php echo $user_email; ?></td>
<td><?php echo $user_url; ?></td>
<td><?php echo $user['user_registered']; ?></td>
</tr>
</tbody>
</table>
<a href="<?php echo 'handle.php?action=dodelete&page=' . $page . '&id=' . $user['ID'] ?>"
class="button delete">确定删除</a>
</div>
</body>
</html>
5、handle.php 处理编辑和删除用户接口
<?php
/* 连接数据库 */
require 'connect.php';
/* 获取用户 ID */
$id = isset($_GET['id']) ? $_GET['id'] : '';
$action = isset($_GET['action']) ? $_GET['action'] : '';
/* 获取当前页码 */
$page = isset($_GET['page']) ? $_GET['page'] : 1;
/* 循环 */
switch ($action) {
/* 进入编辑字段表单页面 */
case 'edit':
include 'edit.php';
break;
/* 修改并保存编辑用户表单中的数据 */
case 'doedit':
$sql = 'UPDATE `users` SET `display_name`=:name, `user_email`=:email, `user_url`=:url WHERE `ID`=:id';
$stmt = $pdo->prepare($sql);
$stmt->execute($_POST);
/* 判断是否修改 */
if ($stmt->rowCount() === 1) {
echo '<script>alert("更新成功");location.href="pages.php?action=doedit&page=' . $page . '&id=' . $id . '";</script>';
} else {
echo '<script>alert("更新失败或没有内容被修改");location.href="pages.php?action=doedit&page=' . $page . '&id=0";</script>';
}
break;
/* 预览要删除的用户 */
case 'delete':
include 'delete.php';
break;
/* 执行要删除的用户 */
case 'dodelete':
$sql = "DELETE FROM `users` WHERE `ID`={$id}";
$stmt = $pdo->query($sql);
if ($stmt->rowCount() === 1) {
echo '<script>alert("删除成功");location.href="pages.php?action=dodelete&page=' . $page . '&id=' . $id . '";</script>';
} else {
echo '<script>alert("删除失败");location.href="pages.php?action=dodelete&page=' . $page . '&id=0";</script>';
}
break;
}
6、Sass 样式代码
@charset "utf-8";
/*************************************************
变量
**************************************************/
/* 默认颜色 */
$color:#667eea;
/* 鼠标经过颜色 */
$hoverColor:#4c51bf;
/* 标题 */
$titleColor: #1a202c;
/* 描边 */
$borderColor: #edf2f7;
/* 表格头部背景 */
$headerColor: #ebf4ff;
/* 表格行背景 */
$rowColor:#f7fafc;
/* 当前页码颜色 */
$currentColor: #bd7886;
/*************************************************
全局设置
**************************************************/
html,
body,
body * {
margin: 0;
padding: 0;
border: 0;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* 标题 */
h3 {
font-size: 28px;
line-height: 28px;
color: $titleColor;
letter-spacing: 2px;
}
/* 输入框默认样式 */
input {
border: 1px solid $borderColor;
background-color: $rowColor;
padding: 10px;
width: 100%;
min-width: 60px;
&:focus {
border-color: $color;
}
}
/* 去除浏览器默认样式 */
button,
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border-radius: 0;
cursor: pointer;
&:focus {
outline: 0;
}
}
/* a标签颜色 */
a {
color: $color;
&:hover {
color: $hoverColor;
}
}
/* 去除 A 标签下划线 */
a,
a:active,
a:hover {
outline: 0;
text-decoration: none;
}
/* 元素动画 */
button,
input,
a {
-moz-transition: ease-in-out 0.5s;
-webkit-transition: ease-in-out 0.5s;
-o-transition: ease-in-out 0.5s;
-ms-transition: ease-in-out 0.5s;
transition: ease-in-out 0.5s;
}
/* body 样式 */
body {
font-size: 12px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 24px;
color: #718096;
background-color: #f7fafc;
font-family: "PingFang SC", "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
/****************************************************
通用样式
****************************************************/
/* 高度100% */
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
/* 容器 */
.container {
background-color: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
padding: 120px;
border-radius: 6px;
/* 提示 */
.hint {
margin-top: 30px;
text-align: center;
padding: 12px;
background-color: $rowColor;
color: $color;
}
}
/* 按钮 */
.button {
border-radius: 4px;
padding: 8px 20px;
color: #ffffff;
display: inline-block;
/* 保存 */
&.jump,
/* 保存 */
&.save,
/* 编辑 */
&.edit {
background-color: $color;
}
/* 删除 */
&.delete {
background-color: $titleColor;
}
&:hover {
background-color: $hoverColor;
color: #ffffff;
}
}
/****************************************************
通用样式 end
****************************************************/
/****************************************************
表格
****************************************************/
.user-table {
border-top: 1px $borderColor solid;
border-left: 1px $borderColor solid;
width: 100%;
border-spacing: 0;
font-size: 12px;
/* 表格标题 */
caption {
font-size: 32px;
color: $titleColor;
line-height: 36px;
margin-bottom: 60px;
}
td,
th {
border-right: 1px $borderColor solid;
border-bottom: 1px $borderColor solid;
padding: 8px 16px;
}
/* 头部 */
thead {
background-color: $headerColor;
}
/*标题*/
th {
font-weight: bold;
white-space: nowrap;
font-size: 14px;
color: $titleColor;
}
/* 隔行区分背景 */
tbody tr:nth-child(2n) {
background-color: $rowColor;
}
/* 按钮 */
.button {
margin: 0 3px;
}
}
/****************************************************
表格 end
****************************************************/
/****************************************************
分页
****************************************************/
.pagination {
margin-top: 30px;
text-align: center;
span,
a {
border: 1px solid $borderColor;
min-width: 32px;
height: 32px;
display: inline-block;
line-height: 32px;
padding: 0 8px;
border-radius: 4px;
margin: 0 2px;
}
a {
color: #718096;
/* 当前页码和鼠标经过 */
&.page {
&:hover,
&.active {
color: #fff;
background-color: $currentColor;
border-color: $currentColor;
}
}
}
/* 页面跳转 */
form.jump-page {
display: inline-block;
vertical-align: middle;
input {
width: 42px;
height: 32px;
}
}
}
/****************************************************
分页 end
****************************************************/
/****************************************************
表单
****************************************************/
.edit-form {
/* 表单 */
form {
min-width: 300px;
}
/* 模块 */
div {
margin-top: 12px;
}
/* 标题 */
h3 {
margin-bottom: 60px;
text-align: center;
}
/* 按钮 */
.save {
width: 100%;
padding: 12px;
}
}
/****************************************************
表单 end
****************************************************/
/****************************************************
删除用户
****************************************************/
body.delete-user {
a.delete {
margin-top: 20px;
width: 120px;
display: block;
margin: 20px auto 0;
text-align: center;
}
}
/****************************************************
删除用户 end
****************************************************/