基于PHP和GET参数实现HTML表格数据动态筛选教程-php教程-PHP中文网

基于PHP和GET参数实现HTML表格数据动态筛选教程

霞舞

发布： 2025-08-30 21:28:15

原创

1124人浏览过

基于PHP和GET参数实现HTML表格数据动态筛选教程

本文将指导如何使用PHP和GET参数，实现HTML表格中数据库数据的动态筛选。通过在页面上设置筛选按钮，用户可以根据特定状态（如在线、离线）来实时刷新并显示相应的数据行，有效管理和展示大量信息。

在web应用中，展示来自数据库的大量数据并提供筛选功能是常见的需求。当用户需要根据特定条件（例如员工状态、订单状态等）查看数据时，动态筛选功能可以极大地提升用户体验和数据可读性。本教程将介绍一种利用php和html get参数进行服务器端数据筛选的方法，实现点击按钮后隐藏/显示特定状态的表格行。

1. 构建筛选控制按钮

首先，我们需要在HTML页面上创建一组按钮，每个按钮代表一个筛选条件（例如“在线”、“离线”、“已断开连接”）。这些按钮将通过URL的GET参数向服务器传递筛选值。

<div class="filter-buttons">
    <a href="?status=Online" class="btn">在线</a>
    <a href="?status=Offline" class="btn">离线</a>
    <a href="?status=Disconnected" class="btn">已断开</a>
    <a href="?" class="btn">全部</a> <!-- 添加一个“全部”按钮以显示所有数据 -->
</div>

登录后复制

说明：

立即学习“PHP免费学习笔记（深入）”；

每个<a>标签的href属性都包含一个?status=X的GET参数，其中X是与数据库中agentStatus字段值相对应的字符串（例如Online、Offline、Disconnected）。
点击这些链接后，页面会重新加载，并将status参数传递给服务器端的PHP脚本。
添加一个href="?"的“全部”按钮，用于清除筛选条件，显示所有数据。

2. PHP后端数据查询逻辑

在PHP脚本中，我们需要根据URL中是否存在status参数来动态构建SQL查询语句。

<?php
require 'CMS/processing/conn.php'; // 引入数据库连接文件

// 初始化SQL查询语句
$sql = "SELECT * FROM agents";

// 检查是否存在GET参数'status'
if (isset($_GET['status']) && !empty($_GET['status'])) {
    $status = $_GET['status'];
    // 注意：直接拼接GET参数存在SQL注入风险，实际项目中应使用预处理语句
    $sql .= " WHERE agentStatus = '" . mysqli_real_escape_string($con, $status) . "'";
}

$result = mysqli_query($con, $sql);

// 检查查询是否成功
if (!$result) {
    die('查询失败: ' . mysqli_error($con));
}
?>

登录后复制

说明：

立即学习“PHP免费学习笔记（深入）”；

isset($_GET['status']) && !empty($_GET['status'])：这行代码检查URL中是否存在名为status的GET参数，并且其值不为空。
$sql .= " WHERE agentStatus = '" . mysqli_real_escape_string($con, $status) . "'";：如果status参数存在，则将WHERE子句添加到SQL查询中，以筛选出匹配特定状态的数据。
mysqli_real_escape_string($con, $status)：这是一个重要的安全措施，用于转义字符串中的特殊字符，以防止SQL注入攻击。尽管如此，强烈建议在生产环境中使用预处理语句（Prepared Statements）来彻底防范SQL注入。

3. HTML表格渲染与数据展示

最后，我们将筛选后的数据通过PHP循环渲染到HTML表格中。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

<table id="main_table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Agent Name</th>
            <th>Agent Rank</th>
            <th>Agent Location</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <?php
        while ($info = mysqli_fetch_array($result)) {
        ?>
        <tr>
            <td><?php echo htmlspecialchars($info['id']); ?></td>
            <td><?php echo htmlspecialchars($info['agentName']); ?></td>
            <td><?php echo htmlspecialchars($info['agentRank']); ?></td>
            <td><?php echo htmlspecialchars($info['locationNames']); ?></td>
            <td><?php echo htmlspecialchars($info['agentStatus']); ?></td>
        </tr>
        <?php
        }
        ?>
    </tbody>
</table>

登录后复制

说明：

立即学习“PHP免费学习笔记（深入）”；

while ($info = mysqli_fetch_array($result))：遍历$result中的每一行数据。
echo htmlspecialchars($info['column_name']);：使用htmlspecialchars函数对输出的数据进行编码，防止跨站脚本攻击（XSS）。

4. 完整示例代码

将以上所有部分整合，形成一个完整的PHP文件（例如index.php）：

<?php
require 'CMS/processing/conn.php'; // 确保这个路径正确指向你的数据库连接文件

// 初始化SQL查询语句
$sql = "SELECT * FROM agents";

// 检查是否存在GET参数'status'
if (isset($_GET['status']) && !empty($_GET['status'])) {
    $status = $_GET['status'];
    // 使用预处理语句增强安全性
    $stmt = mysqli_prepare($con, "SELECT * FROM agents WHERE agentStatus = ?");
    mysqli_stmt_bind_param($stmt, "s", $status);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
} else {
    $result = mysqli_query($con, $sql);
}

// 检查查询是否成功
if (!$result) {
    die('查询失败: ' . mysqli_error($con));
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理商状态筛选</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .filter-buttons { margin-bottom: 20px; }
        .filter-buttons .btn {
            display: inline-block;
            padding: 8px 15px;
            margin-right: 10px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
        }
        .filter-buttons .btn:hover {
            background-color: #0056b3;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>代理商列表</h1>

    <div class="filter-buttons">
        <a href="?status=Online" class="btn">在线</a>
        <a href="?status=Offline" class="btn">离线</a>
        <a href="?status=Disconnected" class="btn">已断开</a>
        <a href="?" class="btn">全部</a>
    </div>

    <table id="main_table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Agent Name</th>
                <th>Agent Rank</th>
                <th>Agent Location</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <?php
            while ($info = mysqli_fetch_array($result)) {
            ?>
            <tr>
                <td><?php echo htmlspecialchars($info['id']); ?></td>
                <td><?php echo htmlspecialchars($info['agentName']); ?></td>
                <td><?php echo htmlspecialchars($info['agentRank']); ?></td>
                <td><?php echo htmlspecialchars($info['locationNames']); ?></td>
                <td><?php echo htmlspecialchars($info['agentStatus']); ?></td>
            </tr>
            <?php
            }
            ?>
        </tbody>
    </table>

</body>
</html>

<?php
// 关闭数据库连接
mysqli_close($con);
?>

登录后复制

数据库连接文件 (CMS/processing/conn.php) 示例：

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

// 创建连接
$con = mysqli_connect($servername, $username, $password, $dbname);

// 检查连接
if (!$con) {
    die("连接失败: " . mysqli_connect_error());
}
// 设置字符集
mysqli_set_charset($con, "utf8");
?>

登录后复制

注意事项

安全性（SQL注入）：在示例代码中，我们已经将直接拼接GET参数的方式替换为预处理语句（Prepared Statements）。这是防止SQL注入最有效的方法。请务必在所有涉及用户输入的数据库操作中采用此方法。
数据类型匹配：确保GET参数传递的状态值与数据库中agentStatus字段的数据类型和实际存储值完全匹配。例如，如果数据库中存储的是数字（1, 2, 3），则GET参数也应传递数字。
用户体验：这种服务器端筛选方式会导致页面重新加载。对于数据量较小或对实时性要求更高的场景，可以考虑使用JavaScript（如AJAX）进行客户端筛选或异步加载，以提供更流畅的用户体验。
错误处理：在实际应用中，应加入更完善的错误处理机制，例如当数据库连接失败或查询出错时，向用户显示友好的错误信息，而不是直接终止脚本。
URL美化：为了更美观的URL和更好的SEO，可以考虑使用Apache的mod_rewrite或Nginx的rewrite规则将?status=Online等参数形式重写为/status/online等路径形式。