本教程将详细介绍如何通过javascript实现动态数据表格的搜索和过滤功能。我们将从api获取数据，将其存储在全局变量中，并利用数组的`filter()`方法根据用户输入进行实时或点击搜索，最终将匹配的数据呈现在html表格中。文章将涵盖数据获取、dom操作、事件监听以及代码结构优化等关键技术，旨在帮助开发者构建高效且用户友好的数据展示界面。
在现代Web应用中，从API获取大量数据并以可搜索、可过滤的表格形式展示给用户是一种常见需求。本教程将引导您完成这一过程，重点讲解如何利用JavaScript实现前端的数据搜索与动态渲染。
1. 构建基础HTML结构
首先，我们需要一个HTML骨架来承载搜索输入框、搜索按钮和数据表格。表格应包含一个tbody元素，用于动态填充数据。
动态数据搜索与过滤 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; }
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新时间 |
|---|
请注意，搜索输入框和搜索按钮分别具有id=”myInput”和id=”mySubmit”，表格的tbody具有id=”tbody”。这些ID将用于JavaScript中获取对应的DOM元素。
2. JavaScript核心逻辑：数据获取与管理
为了实现搜索功能，我们需要将从API获取的原始数据存储在一个全局变量中，以便后续进行过滤操作，而无需每次搜索都重新请求API。
立即学习“Java免费学习笔记（深入）”；
2.1 全局数据存储
定义一个全局变量countriesData来存储所有国家的数据。
// app.jslet 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 += ` ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${result.Date} `; });}
清空表格内容: tbody.innerHTML = “; 这一步非常关键，它确保每次重新渲染时，旧的数据都会被移除，只显示最新的过滤结果。Array.prototype.filter(): 这是JavaScript数组的一个高阶函数，它创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。不区分大小写的模糊匹配: country.Country.toLowerCase().includes(c.toLowerCase()) 是实现不区分大小写模糊匹配的关键。它将国家名称和搜索字符串都转换为小写，然后检查国家名称是否包含搜索字符串。
4. 集成搜索功能
最后一步是为搜索按钮添加事件监听器，以便在用户点击“搜索”时触发数据过滤和渲染。
// 为搜索按钮添加点击事件监听器document.querySelector("#mySubmit").addEventListener("click", e => { const searchTerm = document.querySelector("#myInput").value; _DisplayCountries(searchTerm); // 调用显示函数并传入搜索框的值});
当用户点击搜索按钮时，我们将获取输入框中的值，并将其作为参数传递给_DisplayCountries函数，从而实现数据的过滤和显示。
5. 完整代码示例
将上述HTML和JavaScript代码整合后，您将得到一个功能完整的动态数据搜索与过滤应用。
HTML (index.html)
动态数据搜索与过滤 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; }
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新时间 |
|---|
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 += ` ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${result.Date} `; });}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实现动态数据表格的搜索与过滤功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595160.html
微信扫一扫 
支付宝扫一扫 
