创建高度灵活的 HTML 表格时要遵循的最佳实践是什么？答案

【问题标题】：What is the best practice to follow when creating a highly flexible HTML table?创建高度灵活的 HTML 表格时要遵循的最佳实践是什么？
【发布时间】：2011-07-15 13:47:56
【问题描述】：

我有一张从 MySQL 表中查询的大表（带有表格数据）。每列都是可排序的，除一个之外的所有列都是可选的（用户可以单击要显示的列），并且可以使用不同的搜索词过滤不同的列（甚至更多地过滤掉搜索结果）。

我想知道是否已经有一种方法可以创建这样的表，或者我是否必须从头开始实现它。

如果我要从头开始实施，请给我建议。

真正的遗憾是我不能使用 JavaScript。

谢谢。

【问题讨论】：

标签： php html mysql codeigniter

【解决方案1】：

这似乎是一个容易完成的任务，所以我会从头开始（我最近实际上做了类似的任务）。

最烦人的部分似乎是避免使用 JavaScript，因为使用 JavaScript 显示用于过滤列的表单非常方便。不过，如果不需要编辑数据或在行的 onClick 事件上打开它，那是我唯一会使用 JavaScript 的地方。其他所有事情都可以使用纯 HTML/PHP/SQL 轻松完成。

可能对生成 URL 很方便的函数：

/**
 * Returns URL with modifications based on $params.
 *
 * To remove parameter from URL, specify NULL as it's value.
 *
 * @param array $params
 * @param bool  $leaveUnescaped
 */
function modifyURL(array $params = null, $leaveUnescaped = false) {
    $url = '?' . http_build_query(array_merge($_GET, (array)$params));
    if ( !$leaveUnescaped ) {
        $url = html($url);
    }
    return $url;
}

可能的用法：

<tr>
    <th><a href='<?php echo modifyURL(array('sort_field' => 'id')); ?>'>ID</a></th>
    <th><a href='<?php echo modifyURL(array('sort_field' => 'name')); ?>'>Name</a></th>
</tr>

它也适用于制作分页链接，即 modifyURL(array('page' => $page)) 或只是 modifyURL(compact('page')) 在循环中。

为了显示过滤列的形式，您可以使用 URL modifyURL(array('filter_column' => 'name'))。生成表时，检查isset($_GET['filter_column'])是否为真。如果是并且如果$_GET['filter_column'] 包含有效的列名，则打印表单以过滤相应的列。

您可能需要多种类型的过滤表单 - 一种用于字符串（单个文本字段），一种用于日期（最小日期，最大日期），一种用于数字（最小数字，最大数字）。您可能还需要枚举类型数据的过滤表单，即：

<select name='gender'>
    <option value='m'>male</option>
    <option value='f'>female</option>
</select>

【讨论】：

确实是分页对干净的 URL 有点恼火，这让我提出了这个问题。我想我会选择get。
使用modifyURL() 很容易实现分页。基于$_GET['page'] 和$itemsPerPage 计算limit 和offset 也不应该是一个问题。您可以考虑使用 SQL_CALC_FOUND_ROWS 和 FOUND_ROWS() 来获取项目总数，尽管有人说它可能比 2 个查询慢（一个用于数据，另一个用于总项目数）；其他人说它更快。为页面生成链接时，不要忘记“跳过”大块页码，例如，显示类似“1 2 3 ... 49 50 51 52 53 ... 98 99 100 "，如果您有大量页面。

【解决方案2】：

由于您似乎在使用 CodeIgniter，您检查过 Table Class 吗？

http://codeigniter.com/user_guide/libraries/table.html

【讨论】：