如何通过点击表头对PHP读取MySQL数据生成的表格排序？

嘿，我来帮你搞定这个点击表头排序的需求！其实核心思路就是前端表头传递排序字段和方向，后端根据参数调整SQL的ORDER BY子句，咱们一步步来实现：

1. 后端处理排序参数（PHP部分） #

首先得从前端获取排序的字段和方向，同时要做安全校验，防止SQL注入（只允许你指定的字段排序）。结合你现有的查询代码，修改如下：

// 先定义允许排序的字段白名单，把你实际用到的字段都加进去
$allowed_sort_fields = ['id', 'billable', 'pugh_project']; 
// 获取前端传的参数，默认按id升序排列
$sort_by = isset($_GET['sort_by']) && in_array($_GET['sort_by'], $allowed_sort_fields) ? $_GET['sort_by'] : 'id';
$sort_dir = isset($_GET['sort_dir']) && strtolower($_GET['sort_dir']) === 'desc' ? 'DESC' : 'ASC';

// 构建带排序的SQL查询（替换你原来的$query）
$query = "SELECT * FROM projects ORDER BY `$sort_by` $sort_dir";

// 下面是你原来的读取数据代码，保持不变
$results = $db_link->query($query);
$project_data = [];
while($row = $results->fetch_assoc()) {
    $project_data[$row['id']]['id'] = $row['id'];
    $project_data[$row['id']]['billable'] = $row['billable'];
    $project_data[$row['id']]['pugh_project'] = $row['pugh_project'];
    // 这里补充你其他字段的赋值...
}

注意：用反引号包裹字段名$sort_by，避免和MySQL关键字冲突；白名单验证是关键，能防止恶意参数篡改SQL。

2. 前端表头添加可点击排序（HTML/PHP混合） #

接下来把表头做成可点击的链接，点击时传递排序参数，还要给用户显示当前的排序方向（比如箭头），同时支持切换升序/降序：

<table border="1">
    <thead>
        <tr>
            <!-- ID表头 -->
            <th>
                <a href="?sort_by=id&sort_dir=<?php echo $sort_by === 'id' && $sort_dir === 'ASC' ? 'DESC' : 'ASC'; ?>">
                    ID
                    <!-- 显示当前排序方向的箭头 -->
                    <?php if($sort_by === 'id'): ?>
                        <?php echo $sort_dir === 'ASC' ? '↑' : '↓'; ?>
                    <?php endif; ?>
                </a>
            </th>
            <!-- 可计费字段表头 -->
            <th>
                <a href="?sort_by=billable&sort_dir=<?php echo $sort_by === 'billable' && $sort_dir === 'ASC' ? 'DESC' : 'ASC'; ?>">
                    可计费
                    <?php if($sort_by === 'billable'): ?>
                        <?php echo $sort_dir === 'ASC' ? '↑' : '↓'; ?>
                    <?php endif; ?>
                </a>
            </th>
            <!-- Pugh项目表头 -->
            <th>
                <a href="?sort_by=pugh_project&sort_dir=<?php echo $sort_by === 'pugh_project' && $sort_dir === 'ASC' ? 'DESC' : 'ASC'; ?>">
                    Pugh项目
                    <?php if($sort_by === 'pugh_project'): ?>
                        <?php echo $sort_dir === 'ASC' ? '↑' : '↓'; ?>
                    <?php endif; ?>
                </a>
            </th>
            <!-- 其他字段表头照着上面的格式抄就行 -->
        </tr>
    </thead>
    <tbody>
        <!-- 遍历你的$project_data生成表格内容 -->
        <?php foreach($project_data as $project): ?>
            <tr>
                <td><?php echo htmlspecialchars($project['id']); ?></td>
                <td><?php echo htmlspecialchars($project['billable']); ?></td>
                <td><?php echo htmlspecialchars($project['pugh_project']); ?></td>
                <!-- 其他字段输出... -->
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

这里用htmlspecialchars()包裹输出内容，防止XSS攻击，是个好习惯哦！

3. 实用优化建议 #

• 保留其他查询参数：如果你的页面有搜索、筛选等其他GET参数，点击表头时要带上这些参数，不然会丢失。可以用http_build_query()来生成URL：

  // 先获取当前所有GET参数，替换排序相关的
  $current_params = $_GET;
  $current_params['sort_by'] = 'id';
  $current_params['sort_dir'] = $sort_by === 'id' && $sort_dir === 'ASC' ? 'DESC' : 'ASC';
  // 生成带所有参数的URL
  $sort_url = '?' . http_build_query($current_params);
  

  然后把表头的href换成$sort_url就行。
• 高亮当前排序表头：给当前排序的表头加个样式，让用户一眼看出来：

  th a.active {
      font-weight: bold;
      color: #2196F3;
  }
  

  然后在表头的<a>标签里加类：

  <a href="..." class="<?php echo $sort_by === 'id' ? 'active' : ''; ?>">
  

内容的提问来源于stack exchange，提问作者Lakito