使用 AJAX 过滤从数据库生成的 HTML 表的行

Question

我有一个由 AJAX 生成的 HTML/XML 表，它显示数据库表的有限列。我想使用数据库中不属于 HTML 表的列来过滤 HTML/XML 表的行。

例子：

MySQL 表（忽略语法错误）：

TABLE technicians (id,
                   name,
                   email,
                   level,
                   PRIMARY KEY (id));
TABLE certificates (id,
                    type,
                    name,
                    PRIMARY KEY(id, type),
                    FOREIGN KEY (id) REFERENCES technicians(id));

HTML/XML 表格：

<table>
  <tr>
    <td>technician name</td>
    <td>technician level</td>
  </tr>
</table>

HTML/XML 表中的每一行都将显示技术人员姓名和技术人员级别，但每个“技术人员行”在数据库中都会有更多与之关联的数据。我想按证书和级别过滤每个“技术人员行”。请注意，过滤单个属性时，会显示/隐藏相应的行，而不是一次提交一组标准（基本上，每个标准都会自行提交）。

据我所知，我可以通过以下方式做到这一点：

1. 跟踪 HTML/XML 表中的附加数据。通过这种方式，我可以隐藏/显示各个行，因为它们的属性已被过滤。
2. 通过将过滤条件传递给我的服务器端脚本来重新加载表。这需要我在每次过滤属性时解析整个过滤器表单并重新加载整个表格。
3. 发送一个 AJAX 过滤条件请求到一个脚本，该脚本将以 JSON 格式返回技术人员的 ID。这样我就可以只在表格行中存储技术人员的 ID。

我是 Web 开发的新手，我正在尝试在服务器端和客户端之间找到一个很好的平衡点。实现此目的的正确方法是什么？

编辑：添加数字 3。

Answer 1

如果（似乎是这种情况，因为您提到了 AJAX）您已经要求客户端的浏览器具有良好的 Javascript 功能才能访问您的网站，我会这样做的方式是发送所有相关的从正确的SELECT 查询到客户端的数据作为 JSON；通过这种方式，客户端的 Javascript 代码可以进行所有需要的过滤，并根据需要即时构建和显示 HTML 表格——比往返服务器更快（快很多，on优秀的现代浏览器和优秀的 Javascript 引擎）。

如果你为你的工作选择一个好的 Javascript 框架，这个任务（就像大多数其他 Javascript 任务一样；-）会大大方便（jQuery 似乎是目前最流行的框架，我认为可以推荐它作为新用户的“默认”选择）——尤其是，此类框架在消除许多浏览器差异、不兼容性和错误方面做得非常出色，使您的网站可供更广泛的受众使用。