当前位置：首页 > 行业动态 > 正文

html查询数据展示

admin
行业动态
2025-05-01
3705

HTML通过DOM操作与JavaScript结合实现数据查询与动态展示，利用AJAX异步获取后台数据，配合CSS样式渲染为表格、图表等形式，支持实时交互更新与多维度可视化呈现

数据查询与获取

前端发起查询请求

AJAX/Fetch API：通过 XMLHttpRequest 或 fetch() 向后端接口发送请求，获取 JSON 格式数据。

示例代码：

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据并渲染到页面
  })
  .catch(error => console.error('查询失败:', error));

后端接口设计

常见接口类型：
- RESTful API：通过 GET 请求获取资源，如 /api/users?page=1&limit=10。
- GraphQL：客户端指定所需字段,减少冗余数据传输。

响应格式：通常为 JSON，包含数据列表、总条数、分页信息等。

{
  "status": "success",
  "data": {
    "total": 100,
    "list": [/ 数据项 /]
  }
}

前端展示技术

HTML 表格展示

基础结构：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <!-动态插入数据行 -->
  </tbody>
</table>

动态渲染：

const tbody = document.querySelector('tbody');
data.list.forEach(item => {
  const row = document.createElement('tr');
  row.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.age}</td>`;
  tbody.appendChild(row);
});

卡片布局（Card List）

适用场景：商品列表、用户信息卡等。

示例代码：

<div class="card-container">
  <div class="card">
    <h3>${item.name}</h3>
    <p>年龄：${item.age}</p>
  </div>
  <!-其他卡片 -->
</div>

图表可视化

工具库：ECharts、Chart.js、AntV。

示例：使用 ECharts 展示数据趋势。

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
  yAxis: { type: 'value' },
  series: [{ data: [820, 932, 901], type: 'line' }]
});

动态数据渲染与交互

功能	实现方式
数据加载动画	使用 CSS 动画或加载指示器（如 `loading.gif`）
分页功能	前端分页（截取数组）或后端分页（传递 `page` 和 `limit` 参数）
排序功能	点击表头触发排序，前端对数据数组进行 `sort()` 操作
搜索过滤	监听输入框事件，根据关键词过滤数据数组

分页与排序实现

前端分页

function paginate(data, page, limit) {
  const start = (page 1)  limit;
  return data.slice(start, start + limit);
}
// 示例：显示第2页，每页10条
const currentPageData = paginate(data.list, 2, 10);

后端分页（推荐）

接口参数：?page=2&limit=10
数据库查询：使用 LIMIT 和 OFFSET（如 SQL）或类似功能。

排序逻辑

data.list.sort((a, b) => {
  // 按年龄升序排序
  return a.age b.age;
});

样式与交互优化

需求	解决方案
响应式表格	使用 CSS 媒体查询或框架（如 Bootstrap 的 `.table-responsive`）
悬停高亮	css `<tr>:hover { background: #f5f5f5; }
点击查看详情	在 `<tr>` 上添加 `onclick` 事件，跳转至详情页或弹出浮层