使用jQuery实现带分组表头的表格数据动态过滤
本文将指导您如何利用jquery实现一个高效的表格数据动态过滤功能，尤其适用于包含多个独立分组表头（``）的复杂表格。通过引入`data-group`属性关联表头和表体，我们能够智能地根据搜索内容，精确地显示或隐藏相应的表头及其关联的行，从而优化用户体验和数据呈现。 在网页开发中，动态过滤表格数据是一项常见需求。当表格包含多个独立的表头（）和表体（问题概述
原始实现及局限
一个基本的jQuery表格过滤功能通常会监听输入框的keyup事件，然后遍历所有表格行，根据行内容与搜索词的匹配情况来切换行的可见性。
原始HTML结构示例
以下是一个包含多个和
| Information about department | ||
|---|---|---|
| Name - It | Phone - 1111111 | E-mail - [email protected] |
| Information about department 2 | ||
| Name - Finance | Phone - 1111112 | E-mail - [email protected] |
| Name - Finance2 | Phone - 1111113 | E-mail - [email protected] |
原始JavaScript过滤代码
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});局限性分析
上述代码的局限性在于：
- 它只对#myTable tbody tr元素进行过滤和显示/隐藏操作。
-
元素完全不受影响，无论其关联的
中是否有匹配的行，所有的都会一直显示。
这导致用户在搜索时，可能会看到一堆不包含任何相关内容的表头，降低了用户体验。
解决方案：利用数据分组属性
为了解决上述问题，我们需要一种机制来逻辑地关联每个及其对应的
。HTML5的data-*自定义属性是实现这一目标的理想选择。我们可以为每个相关的和 分配一个相同的data-group属性值。优化后的HTML结构
通过为每个和其关联的
添加一个唯一的data-group属性，我们建立了一个逻辑上的分组关系。Information about department Name - It Phone - 1111111 E-mail - [email protected] Information about department 2 Name - Finance Phone - 1111112 E-mail - [email protected] Name - Finance2 Phone - 1111113 E-mail - [email protected] 在上述结构中，data-group="1"将第一个与第一个
关联起来，data-group="2"则关联了第二个和 ，以此类推。JavaScript实现详解
有了分组属性后，我们的JavaScript逻辑将进行以下调整：
- 监听输入框事件：与之前相同，当用户在搜索框输入时触发。
- 遍历每个：而不是直接遍历
，我们现在遍历每个元素。 - 获取分组ID：对于每个，获取其data-group属性值。
- 检查自身匹配：判断当前的文本内容是否包含搜索词。
- 查找关联的行：根据data-group值，找到所有属于该分组的 中的
元素。 - 遍历并检查行匹配：遍历这些
元素，判断它们的内容是否包含搜索词，并根据匹配结果切换行的可见性。同时，记录该分组内是否有任何行匹配成功。 - 切换和 可见性：如果自身匹配成功，或者其关联的 中有任何行匹配成功，则显示该及其对应的整个 ；否则，隐藏它们。
$(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase().trim(); // 获取搜索值并转换为小写，去除首
尾空格
$("#myTable thead").each(function() { // 遍历表格中的每个 thead 元素
var group = $(this).data("group"); // 获取当前 thead 的 data-group 属性值
var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1; // 检查 thead 自身内容是否匹配搜索词
// 构建选择器，用于查找当前分组对应的 tbody 中的所有 tr 元素
var selector = `tbody[data-group='${group}'] tr`;
var allRows = $('#myTable').find(selector);
var isAnyRowMatched = false; // 标志位，用于记录当前分组是否有任何 tr 匹配成功
// 遍历当前分组中的所有 tr 元素
for (var row of $(allRows)) {
const isRowContentMatched = $(row).text().toLowerCase().indexOf(value) > -1; // 检查行内容是否匹配搜索词
$(row).toggle(isRowContentMatched); // 根据行内容匹配结果切换行的可见性
if (isRowContentMatched) {
isAnyRowMatched = true; // 如果有行匹配成功，则设置标志位为 true
}
}
// 切换当前 thead 的可见性：如果 thead 自身匹配成功，或者其关联的任何行匹配成功，则显示 thead
$(this).toggle(isTheadMatched || isAnyRowMatched);
// 切换当前 tbody 的可见性：与 thead 的逻辑保持一致，确保整个分组的显示/隐藏是同步的
$(`tbody[data-group='${group}']`).toggle(isTheadMatched || isAnyRowMatched);
});
});
});通过这种方式，我们确保了表头与表体内容之间的逻辑关联，实现了更加智能和用户友好的表格过滤功能。
注意事项
-
性能优化：对于包含成千上万条记录的超大型表格，纯客户端的DOM操作可能会导致性能瓶颈。在这种情况下，可以考虑以下策略：
- 虚拟滚动 (Virtual Scrolling)：只渲染视口内可见的行。
- 服务器端过滤：将搜索请求发送到后端，由服务器返回过滤后的数据。
- 防抖 (Debounce)：限制keyup事件的触发频率，例如在用户停止输入500毫秒后
- 获取分组ID：对于每个，获取其data-group属性值。
尾空格
$("#myTable thead").each(function() { // 遍历表格中的每个 thead 元素
var group = $(this).data("group"); // 获取当前 thead 的 data-group 属性值
var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1; // 检查 thead 自身内容是否匹配搜索词
// 构建选择器，用于查找当前分组对应的 tbody 中的所有 tr 元素
var selector = `tbody[data-group='${group}'] tr`;
var allRows = $('#myTable').find(selector);
var isAnyRowMatched = false; // 标志位，用于记录当前分组是否有任何 tr 匹配成功
// 遍历当前分组中的所有 tr 元素
for (var row of $(allRows)) {
const isRowContentMatched = $(row).text().toLowerCase().indexOf(value) > -1; // 检查行内容是否匹配搜索词
$(row).toggle(isRowContentMatched); // 根据行内容匹配结果切换行的可见性
if (isRowContentMatched) {
isAnyRowMatched = true; // 如果有行匹配成功，则设置标志位为 true
}
}
// 切换当前 thead 的可见性：如果 thead 自身匹配成功，或者其关联的任何行匹配成功，则显示 thead
$(this).toggle(isTheadMatched || isAnyRowMatched);
// 切换当前 tbody 的可见性：与 thead 的逻辑保持一致，确保整个分组的显示/隐藏是同步的
$(`tbody[data-group='${group}']`).toggle(isTheadMatched || isAnyRowMatched);
});
});
});