![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品信息表分页显示</title>
<style>
table th{
border: 1px solid black;
}
table tr td{
border: 1px solid black;
}
table th {
background-color: lightskyblue;
}
table {
border-collapse: collapse;
width: 50%;
margin: 30px auto;
text-align: center;
}
.center{
width = 50%;
text-align: center;
}
a{
text-decoration: none;
margin-left: 10px;
text-align: center;
color: lightseagreen;
}
h3 a:hover, .active {
color: lightcoral;
}
form {
display: inline;
}
</style>
</head>
<body>
<?php
//连接数据库
//导入分页函数
require 'lib/func_page.php';
$db = mysqli_connect('www.develop.ss','root','root','php');
//防止从数据库中取出的数据中文显示??的问题
mysqli_set_charset($db,"utf8");
$page = isset($_GET['p']) ? $_GET['p'] : 1;
$num = 5;
$table = 'commodit';
//调用分页函数
$data = func_page($db,$table,$page,$num);
$rows = $data['rows']; //当前分页数据
$pages = $data['pages']; //总页数
//如果当前变成为了0,则强制修改为1,否则就是当前页数
$page = ($page == 0) ? 1 : $page;
//如果大于总页数,则强制修改为总页数,否则就是当前页数
$page = ($page > $pages) ? $pages : $page;
?>
<table>
<caption><h2>商品信息表<h2></caption>
<tr>
<th>ID</th>
<th>商品名称</th>
<th>价格</th>
<th>库存</th>
</tr>
<?php foreach ($rows as $row): ?>
<tr>
<td><?php echo $row['ID']; ?></td>
<td><?php echo $row['Name']; ?></td>
<td><?php echo $row['Price']; ?></td>
<td><?php echo $row['Stock']; ?></td>
</tr>
<?php endforeach;?>
</table>
<div>
<div class="center">
<!-- 当前是第一页的时候,上一页和首页链接应该不显示-->
<?php if($page != 1): ?>
<a href="http://www.develop.ss/php/HomeWork/0427?p=1">首页</a>
<a href="http://www.develop.ss/php/HomeWork/0427?p=<?php echo $page-1; ?>">上一页</a>
<?php endif; ?>
<!--生成中间页码-->
<?php for($i=1; $i<=$pages; $i++): ?>
<!------高亮显示当前页码----------->
<a class="<?php if($_GET['p']==$i){echo 'active';}?>" href="http://www.develop.ss/php/HomeWork/0427?p=<?php echo $i ?>"><?php echo $i ?></a>
<?php endfor; ?>
<!--当前已经是最后一页的时候,下一页和最后一页也应该不显示-->
<?php if($page != $pages) :?>
<a href="http://www.develop.ss/php/HomeWork/0427/?p=<?php echo $page+1; ?>">下一页</a>
<a href="http://www.develop.ss/php/HomeWork/0427/?p=<?php echo $pages; ?>">尾页</a>
<?php endif; ?>
<!--实现页面的快速跳转-->
<form action="" method="get">
第
<select name="p" id="">
<?php for($i=1; $i<=$pages; $i++): ?>
<!-- 循环输出全部页码,并锁定当前页-->
<option value="<?php echo $i; ?>" <?php if($_GET['p']==$i){echo 'selected';} ?>><?php echo $i; ?></option>
<?php endfor; ?>
</select>
页
<button>跳转</button>
</form>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
header("Content-type: text/html; charset=utf-8");
//封装分页函数
if(!function_exists('func_page')){
function func_page($db,$table,$page=1,$num=5){
$offset = ($page-1)*$num;
$sql = "SELECT * FROM {$table} LIMIT {$offset},{$num};";
$res = mysqli_query($db,$sql);
$rows = mysqli_fetch_all($res,MYSQLI_ASSOC);
//获取总页数分2步:1.获取总记录数,2.再除以每次的显示数量,结果向上取整
$number = mysqli_query($db,"SELECT COUNT(*) FROM {$table}");
list($total) = mysqli_fetch_row($number); //总记录数保存到变量$total中
$pages = ceil($total / $num); //获取到总页数 $pages
//返回当前分页数据与总页数
return ['rows'=>$rows, 'pages'=>$pages];
}
}点击 "运行实例" 按钮查看在线实例
运行效果图：
总结：
在做分页函数的时候，遇到一个商品名称不能正常显示，全部显示??的问题，为了解决这个问题，我尝试了在php文件中加入头文件header("Content-type: text/html; charset=utf-8");但是没有效果，html文件的编码设置也是UTF-8，数据库的编码也是UTF-8，但是显示出来的商品名称的中文数据依然是？？，这个问题只发生在从数据库取出数据，在html中表头的中文部分是正常显示的。最后，在网上找了了一个解决方法：
在index.php中的连接数据库中添加mysqli_set_charset($db,"utf8");即可解决这个问题。
$db = mysqli_connect('www.develop.ss','root','root','php');
//防止从数据库中取出的数据中文显示??的问题
mysqli_set_charset($db,"utf8");
操作系统：Linux ubuntu18.04
操作系统语言：Engilsh
不知道是不是跟我的操作系统和语言有关系。
