如何使用JavaScript实现动态数据表格的搜索与过滤功能-html教程-PHP中文网

如何使用JavaScript实现动态数据表格的搜索与过滤功能

本教程将详细介绍如何通过javascript实现动态数据表格的搜索和过滤功能。我们将从api获取数据，将其存储在全局变量中，并利用数组的`filter()`方法根据用户输入进行实时或点击搜索，最终将匹配的数据呈现在html表格中。文章将涵盖数据获取、dom操作、事件监听以及代码结构优化等关键技术，旨在帮助开发者构建高效且用户友好的数据展示界面。

在现代Web应用中，从API获取大量数据并以可搜索、可过滤的表格形式展示给用户是一种常见需求。本教程将引导您完成这一过程，重点讲解如何利用JavaScript实现前端的数据搜索与动态渲染。

1. 构建基础HTML结构

首先，我们需要一个HTML骨架来承载搜索输入框、搜索按钮和数据表格。表格应包含一个tbody元素，用于动态填充数据。

<!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; }
        input[type="text"], input[type="submit"] { padding: 8px; margin-right: 5px; border: 1px solid #ccc; border-radius: 4px; }
        input[type="submit"] { background-color: #007bff; color: white; cursor: pointer; }
        input[type="submit"]: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>

    <!-- 搜索框与搜索按钮 -->
    <input type="text" id="myInput" placeholder=" 搜索国家 ">
    <input type="submit" id="mySubmit" value="搜索" class="submit">

    <!-- 数据表格 -->
    <table class="table">
        <thead>
            <tr>
                <th scope="col">国家</th>
                <th scope="col">新增确诊</th>
                <th scope="col">累计确诊</th>
                <th scope="col">新增死亡</th>
                <th scope="col">累计死亡</th>
                <th scope="col">新增恢复</th>
                <th scope="col">累计恢复</th>
                <th scope="col">最后更新时间</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <!-- 数据将在这里动态加载 -->
        </tbody>
    </table>

    <script src="app.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

登录后复制

请注意，搜索输入框和搜索按钮分别具有id="myInput"和id="mySubmit"，表格的tbody具有id="tbody"。这些ID将用于JavaScript中获取对应的DOM元素。

2. JavaScript核心逻辑：数据获取与管理

为了实现搜索功能，我们需要将从API获取的原始数据存储在一个全局变量中，以便后续进行过滤操作，而无需每次搜索都重新请求API。

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

2.1 全局数据存储

定义一个全局变量countriesData来存储所有国家的数据。

// app.js

let countriesData = []; // 用于存储从API获取的所有国家数据

登录后复制

2.2 异步获取数据

使用fetch API从指定端点获取数据。async/await语法使得异步操作更加简洁易读。

const getdata = async () => {
  const endpoint = "https://api.covid19api.com/summary";
  try {
    const response = await fetch(endpoint);
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    countriesData = data.Countries; // 将获取到的国家数据赋值给全局变量
    _DisplayCountries(); // 数据加载完成后，首次显示所有国家
  } catch (error) {
    console.error("获取数据失败:", error);
    // 可以在这里向用户显示错误消息
  }
}

// 页面加载时调用数据获取函数
getdata();

登录后复制

3. 实现数据动态渲染与过滤

我们将创建一个独立的函数来负责数据的过滤和表格的渲染。这种模块化的设计有助于代码的复用和维护。

3.1 _DisplayCountries 函数详解

这个函数接收一个可选的搜索字符串参数c。如果c为空，则显示所有数据；否则，根据c过滤数据。

const _DisplayCountries = (c = "") => {
  let tbody = document.querySelector("#tbody");
  tbody.innerHTML = ``; // 每次渲染前清空表格内容

  // 根据搜索字符串过滤数据
  const filteredCountries = countriesData.filter(country =>
    country.Country.toLowerCase().includes(c.toLowerCase())
  );

  // 遍历过滤后的数据，并添加到表格中
  filteredCountries.forEach(result => {
    tbody.innerHTML += `<tr>
        <td>${result.Country}</td>
        <td>${result.NewConfirmed}</td>
        <td>${result.TotalConfirmed}</td>
        <td>${result.NewDeaths}</td>
        <td>${result.TotalDeaths}</td>
        <td>${result.NewRecovered}</td>
        <td>${result.TotalRecovered}</td>
        <td>${result.Date}</td>
    </tr>`;
  });
}

登录后复制

清空表格内容: tbody.innerHTML = ``; 这一步非常关键，它确保每次重新渲染时，旧的数据都会被移除，只显示最新的过滤结果。
Array.prototype.filter(): 这是JavaScript数组的一个高阶函数，它创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。
不区分大小写的模糊匹配: country.Country.toLowerCase().includes(c.toLowerCase()) 是实现不区分大小写模糊匹配的关键。它将国家名称和搜索字符串都转换为小写，然后检查国家名称是否包含搜索字符串。

4. 集成搜索功能

最后一步是为搜索按钮添加事件监听器，以便在用户点击“搜索”时触发数据过滤和渲染。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

// 为搜索按钮添加点击事件监听器
document.querySelector("#mySubmit").addEventListener("click", e => {
  const searchTerm = document.querySelector("#myInput").value;
  _DisplayCountries(searchTerm); // 调用显示函数并传入搜索框的值
});

登录后复制

当用户点击搜索按钮时，我们将获取输入框中的值，并将其作为参数传递给_DisplayCountries函数，从而实现数据的过滤和显示。

5. 完整代码示例

将上述HTML和JavaScript代码整合后，您将得到一个功能完整的动态数据搜索与过滤应用。

HTML (index.html)

<!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; }
        input[type="text"], input[type="submit"] { padding: 8px; margin-right: 5px; border: 1px solid #ccc; border-radius: 4px; }
        input[type="submit"] { background-color: #007bff; color: white; cursor: pointer; }
        input[type="submit"]: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>

    <input type="text" id="myInput" placeholder=" 搜索国家 ">
    <input type="submit" id="mySubmit" value="搜索" class="submit">

    <table class="table">
        <thead>
            <tr>
                <th scope="col">国家</th>
                <th scope="col">新增确诊</th>
                <th scope="col">累计确诊</th>
                <th scope="col">新增死亡</th>
                <th scope="col">累计死亡</th>
                <th scope="col">新增恢复</th>
                <th scope="col">累计恢复</th>
                <th scope="col">最后更新时间</th>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>

    <script src="app.js"></script>
</body>
</html>

登录后复制

JavaScript (app.js)

let countriesData = [];

const getdata = async () => {
  const endpoint = "https://api.covid19api.com/summary";
  try {
    const response = await fetch(endpoint);
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    countriesData = data.Countries;
    _DisplayCountries(); // 首次加载时显示所有国家
  } catch (error) {
    console.error("获取数据失败:", error);
  }
}

const _DisplayCountries = (c = "") => {
  let tbody = document.querySelector("#tbody");
  tbody.innerHTML = ``; // 清空表格内容

  const filteredCountries = countriesData.filter(country =>
    country.Country.toLowerCase().includes(c.toLowerCase())
  );

  filteredCountries.forEach(result => {
    tbody.innerHTML += `<tr>
        <td>${result.Country}</td>
        <td>${result.NewConfirmed}</td>
        <td>${result.TotalConfirmed}</td>
        <td>${result.NewDeaths}</td>
        <td>${result.TotalDeaths}</td>
        <td>${result.NewRecovered}</td>
        <td>${result.TotalRecovered}</td>
        <td>${result.Date}</td>
    </tr>`;
  });
}

getdata(); // 页面加载时执行数据获取

document.querySelector("#mySubmit").addEventListener("click", e => {
  const searchTerm = document.querySelector("#myInput").value;
  _DisplayCountries(searchTerm);
});

登录后复制

6. 进阶考量与优化

6.1 替代的过滤方法：正则表达式

除了includes()方法，您也可以使用正则表达式进行更灵活的匹配，例如，实现更复杂的模式匹配或只匹配单词开头等。

// 在 _DisplayCountries 函数内部，替换 filter 逻辑
const _DisplayCountries = (c = "") => {
  let tbody = document.querySelector("#tbody");
  tbody.innerHTML = ``;

  // 使用正则表达式进行不区分大小写的匹配
  let regex = new RegExp(c, "i"); // "i" 标志表示不区分大小写
  const filteredCountries = countriesData.filter(country =>
    country.Country.match(regex)
  );

  filteredCountries.forEach(result => {
    // ... 渲染表格行的代码保持不变
  });
}

登录后复制

RegExp(c, "i")会创建一个正则表达式对象，其中c是搜索字符串，"i"表示忽略大小写。match()方法则用于检查字符串是否匹配该正则表达式。

6.2 性能优化：防抖与节流

如果您的搜索功能是实时触发（例如，用户每输入一个字符就搜索），对于大量数据或频繁操作，可能会导致性能问题。此时可以考虑使用防抖（Debounce）或节流（Throttle）技术。

防抖: 在事件触发后，等待一个固定的时间，如果在这段时间内事件再次触发，则重新计时。只有当等待时间内没有再次触发事件时，才执行函数。适用于搜索框输入，避免每次按键都触发搜索。
节流: 在一个固定的时间周期内，函数只执行一次。适用于高频事件，如窗口resize或滚动。

6.3 用户体验：清空搜索框的逻辑

当用户清空搜索框时，通常期望表格能重新显示所有数据。目前的实现已经可以做到这一点，因为当c为空字符串时，filter()会返回所有元素。

6.4 错误处理

在getdata函数中，我们已经添加了基本的try-catch块来捕获fetch请求中的网络错误或解析错误。在实际应用中，您可能需要更详细的错误反馈机制，例如在页面上显示友好的错误提示。

6.5 多字段搜索

如果需要搜索多个字段（例如，同时搜索国家名称和确诊人数），可以修改filter回调函数：

const filteredCountries = countriesData.filter(country => {
  const searchTermLower = c.toLowerCase();
  return country.Country.toLowerCase().includes(searchTermLower) ||
         String(country.TotalConfirmed).includes(searchTermLower); // 假设也搜索确诊人数
});

登录后复制

总结

通过本教程，您应该已经掌握了使用JavaScript实现动态数据表格搜索与过滤的核心技术。关键在于将数据与视图分离，将获取到的原始数据存储在内存中，然后通过Array.prototype.filter()方法根据用户输入进行高效过滤，并动态更新HTML表格。模块化的函数设计、对性能和用户体验的考量，以及对更高级过滤方法的理解，将帮助您构建更加健壮和高效的Web应用。

以上就是如何使用JavaScript实现动态数据表格的搜索与过滤功能的详细内容，更多请关注php中文网其它相关文章！