MYSQL+PHP+H5前端，实战分页原理，WEB开发术中的‘葵花宝典’...

分页原理与实现：

连接数据库：

连接数据库

定义数据库databases.php：

<?php
namespace pdo_edu;
return [
    'type' => $type ?? 'mysql',
    'host' => $host ?? 'localhost',
    'dbname' => $dbname ?? 'apple',
    'port' => $port ?? '3306',
    'charset' => $charset ?? 'utf8',
    'username' => $username ?? 'root',
    'password' => $password ?? 'root'
];

连接数据库connect.php：

<?php
namespace pdo_edu2;
$config = require __DIR__ . '/database.php';
use PDO;
//PDO数据连接~三要素 DSN数据源 username password,
extract($config);
$dsn = sprintf('%s:host=%s;dbname=%s',$type,$host,$dbname);
try {
    $pdo = new PDO($dsn,$username ,$password,[PDO::ATTR_ERRMODE=> PDO::ERRMODE_WARNING]);
    // var_dump($pdo);
    //设置结果集的默认获取方式,只获取关联数组部分
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
} catch(\Exception $e) {
    die('Connection error: '. $e->getMessage());
}

拿到数据shuju.php：

拿到数据

后端处理处理：

<?php
require 'connect.php';
//每页显示的数量
$num = 8;
//当前页码,默认为1
$page = $_GET['p'] ?? 1;
// 计算偏移量
$offset = ($page - 1) * $num ;
//获取分页数据
$sql = " SELECT `id`,`name`,`pro`,`price` FROM `order` LIMIT {$num} OFFSET {$offset}";
$orders = $pdo->query($sql)->fetchAll();
// print_r($users);
//获取总页数,count() 函数返回数组中元素的数目,ceil() 函数向上舍入为最接近的整数。
$sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `order`";
$pages = $pdo->query($sql)->fetch()['total'];
// print_r($pages);

前端数据分页显示fenye.php：

数据分页显示

<?php  require 'shuju.php'?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页数据显示</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <table>
        <caption>服务需求信息表</caption>
        <thead>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>项目</td>
                <td>价格</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <?php foreach($orders as $order):?>
            <tr>
                <td><?= $order['id']?></td>
                <td><?= $order['name']?></td>
                <td><?= $order['pro']?></td>
                <td><?= $order['price']?></td>
                <td><button>删除</button><button>编辑</button></td>
            </tr>
            <?php endforeach;?>
        </tbody>
    </table>
    <!-- 动态生成分页条 -->
    <p>
        <!-- 1. 分页条的动态生成,2. 跳转地址的动态生成,3. 当前页码的高亮显示 -->
        <!-- 分页条中的页码应该动态生成 -->
        <?php for ($i = 1; $i <= $pages; $i++): ?>
        <?php
                $jump = sprintf('%s?p=%s',$_SERVER['PHP_SELF'], $i);
                // $i: 分页中的页码
                // $page: 在URL中通过GET获取的页码?p=X
                $active = ($i == $page) ? 'active' : null;
            ?>
        <a href="<?=$jump?>" class="<?=$active?>"><?=$i?></a>
        <?php endfor ?>
    </p>
</body>
</html>

style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #555;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*表格样式*/
table {
  width: 90%;
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
}
table caption {
  font-size: 1.2rem;
  margin: 15px;
}
table td,
table th {
  border: 1px solid;
  padding: 10px;
}
table tr:hover {
  background-color: #eee;
}
table thead tr:only-of-type {
  background-color: lightseagreen;
}
table button {
  width: 56px;
  height: 26px;
}
table button:last-of-type {
  color: seagreen;
}
table button {
  cursor: pointer;
  margin: 0 3px;
}
/*分页条样式*/
body > p {
  display: flex;
}
p > a {
  text-decoration: none;
  color: #555;
  border: 1px solid;
  padding: 5px 10px;
  margin: 10px 2px;
}
.active {
  background-color: lightseagreen;
  color: white;
  border: 1px solid lightseagreen;
}

连接数据库：

定义数据库databases.php：

连接数据库connect.php：

拿到数据shuju.php：

后端处理处理：

前端数据分页显示fenye.php：

style.css:

相关文章