仿PHP中文网分页实例
实现功能
- 实现PHP中文网类似分页效果
- 可以对记录进行编辑和删除
效果图如下:
分页代码
<?php require 'demo1.php' ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿php中文网分页数据展示实例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<caption>员工管理系统</caption>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>职位</th>
<th>手机</th>
<th>入职时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php foreach ($staffs as $staff) : ?>
<tr>
<td><?php echo $staff['id'] ?></td>
<td><?php echo $staff['name'] ?></td>
<td><?php echo $staff['age'] ?></td>
<td><?php echo $staff['sex'] ? '男' : '女' ?></td>
<td><?php echo $staff['position'] ?></td>
<td><?php echo $staff['mobile'] ?></td>
<td><?php echo date('Y-m-d', $staff['hiredate']) ?></td>
<td><button onclick="location.href='handle.php?action=edit&id=<?php echo $staff['id'] ?>&p=<?php echo $page ?>'">编辑</button>
<button onclick="location.href='handle.php?action=del&id=<?php echo $staff['id'] ?>'">删除</button></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<!-- 添加跳转到首页, 前一页, 下一页, 尾页的功能 -->
<p>
<?php
// 1. 分页条显示7个页码
$showPages = 7;
// 2. 分页条的起始页码
$startPage = 1;
// 3. 分页条的终止页码
$endPage = $pages; // 当前总页数: 14
//倒数第二页页码
$prevEndpage=$pages-1;
// 4. 分页条的偏移量: (当前分页条显示的页码数 - 1) / 2
$offsetPage = ($showPages -1) / 2; // 2
// 只有当前分页条数量 < 总页数, 才有必要显示出省略标记
if ($showPages < $pages) {
// 如果当前页>$showPages时,显示'...' 。
// 将当前分页条页码重置
if ($page >$showPages) {
$startOmit = '...';
$startPage = $page - $offsetPage;
$endPage = $page + $offsetPage;
//当前页+$showPages>总页数时,右侧显示最后8个页码
if (($page+$showPages)>$pages){
$startPage=$pages-$showPages;
$endPage=$pages;
}
} else {
// 当前页 <=$showPages时,左侧显示8个页码> ;
$startPage = 1;
$endPage = $showPages+1;
}
//当前页+$showPages-1<总页数时,显示'...'
if ($page + $showPages-1< $pages) {
$endOmit = '...';
}
}
?>
<!-- 首页 -->
<a href="<?php echo $_SERVER['PHP_SELF'] . '?p=1' ?>">首页</a>
<!-- 前一页 -->
<?php
$prev = $page - 1;
if ($page == 1) $prev = 1;
?>
<a href="<?php echo $_SERVER['PHP_SELF'] . '?p=' . $prev ?>">前一页</a>
<!-- 当前页>7时,左侧显示页码'1 2 ...' -->
<?php if (isset($startOmit)) : ?>
<a href="<?php echo $_SERVER['PHP_SELF'].'?p=1' ?>">1</a>
<a href="<?php echo $_SERVER['PHP_SELF'].'?p=2' ?>">2</a>
<a href="#"><?php echo $startOmit ?></a>
<?php endif ?>
<!-- 循环出从$startPage到$endPage页码 -->
<?php for ($i=$startPage; $i<=$endPage; $i++): ?>
<?php
$jump = sprintf('%s?p=%s', $_SERVER['PHP_SELF'], $i );
$active = ($i == $page) ? 'active' :null;
?>
<a href="<?php echo $jump ?>" class="<?php echo $active ?>"><?php echo $i ?></a>
<?php endfor ?>
<!-- 当前页+6<总页数时,显示'...'和最后两个页码 -->
<!-- $prevEndpage是倒数第二页页码 -->
<?php if (isset($endOmit)) : ?>
<a href="#"><?php echo $endOmit ?></a>
<a href="<?php echo $_SERVER['PHP_SELF'] . "?p={$prevEndpage}" ?>"><?php echo $prevEndpage ?></a>
<a href="<?php echo $_SERVER['PHP_SELF']."?p={$pages}" ?>"><?php echo $pages ?></a>
<?php endif ?>
<!-- 下一页 -->
<?php
$next = $page + 1;
if ($page == $pages) $next = $pages;
?>
<a href="<?php echo $_SERVER['PHP_SELF'] . '?p=' . $next ?>">下一页</a>
<!-- 尾页 -->
<a href="<?php echo $_SERVER['PHP_SELF'] . '?p='. $pages ?>">尾页</a>
</p>
</body>
</html>
编辑、删除,handle控制器代码
<?php
require 'demo1.php';
$action = $_GET['action'];
$id = $_GET['id'];
switch ($action) {
// 编辑需要进行二步
// 1. 渲染编辑表单
case 'edit':
include 'edit.php';
break;
// 2. 执行编辑操作
case 'doedit':
$sql = 'UPDATE `staffs` SET `name`=:name, `age`=:age,`sex`=:sex,`position`=:position ,`mobile`=:mobile,`hiredate`=:hiredate WHERE `id`=:id';
// print_r($_POST);
// $_POST['id'] = $id;
$_POST['hiredate'] = strtotime($_POST['hiredate']);
$stmt = $pdo->prepare($sql);
$stmt->execute($_POST);
if ($stmt->rowCount() === 1) echo '<script>alert("更新成功");location.href="demo4.php";</script>';
break;
// 3. 删除
case 'del':
$sql="delete from `staffs` where `id`=$id";
$stmt = $pdo->prepare($sql);
$stmt->execute();
if ($stmt->rowCount() === 1) echo '<script>alert("删除成功");location.href="demo4.php";</script>';
break;
}
编辑页面效果图
删除效果图
总结
- 1、进入实战阶段,开始进行前期学习内容的综合运用。对分页来说,弄通分页规则非常重要。感觉写代码时,排错占的时间越来越长。
- 2、目前对于js还不了解,感觉编辑、删除功能还不完善,下步争取实现编辑、删除后,显示的还是当前页,而不是统一回到第一页。