从后端动态加载数据到 HTML 表格并实现分页

2023-11-19 13:12:18

构建动态 HTML 表格：以交互方式呈现数据

在数据驱动和智能决策盛行的时代，数据可视化已经成为各个领域的重中之重。交互式信息呈现方式可以带来更直观的理解和洞察。本文将带领您一步步探索如何利用 HTML、CSS、JavaScript、Node.js 和 Express.js 构建一个动态的 HTML 表格，该表格的数据是从后端加载的，并实现了分页功能。

1. HTML 结构

HTML 代码负责定义表格的结构，包括表头、表体和分页控件。在表头中，我们指定表头列的名称，而在表体中，使用循环动态填充数据。

<!-- 表格结构 -->
<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody id="table-body">
  </tbody>
</table>

<!-- 分页控件 -->
<div id="pagination">
  <button id="prev-page">Previous</button>
  <button id="next-page">Next</button>
</div>

2. CSS 样式

CSS 样式负责定义表格的外观，包括表头样式、表体样式和分页控件样式。

/* 表格样式 */
#data-table {
  border-collapse: collapse;
}

#data-table th {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
}

#data-table td {
  padding: 10px;
  text-align: center;
}

/* 分页控件样式 */
#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

#prev-page, #next-page {
  padding: 10px;
  margin: 10px;
  background-color: #f2f2f2;
  border: none;
  cursor: pointer;
}

3. JavaScript 代码

JavaScript 代码负责实现动态加载数据和分页功能。它使用 fetch() 函数从后端获取数据，并使用 renderData() 函数将数据渲染到表格中。分页功能通过事件监听器实现，当用户点击分页按钮时，会重新加载相应页面的数据。

/* 获取数据并渲染 */
fetch('data.csv')
  .then(response => response.text())
  .then(data => {
    // 解析 CSV 数据
    let json = parseCSV(data);

    // 计算总页数
    let totalPages = Math.ceil(json.length / dataPerPage);

    // 渲染初始数据
    renderData(json.slice(0, dataPerPage));

    // 添加事件监听器
    document.getElementById('prev-page').addEventListener('click', () => {
      // 处理前一页按钮点击事件
    });

    document.getElementById('next-page').addEventListener('click', () => {
      // 处理下一页按钮点击事件
    });
  });

/* 渲染数据 */
function renderData(data) {
  // 获取表主体
  let tableBody = document.getElementById('table-body');
  // 清空表主体
  tableBody.innerHTML = '';

  // 循环遍历数据
  data.forEach(row => {
    // 创建新行
    let tr = document.createElement('tr');

    // 创建新单元格并填充数据
    Object.values(row).forEach(value => {
      let td = document.createElement('td');
      td.textContent = value;
      tr.appendChild(td);
    });

    // 将新行添加到表主体
    tableBody.appendChild(tr);
  });
}

4. 后端代码

后端代码使用 Node.js 和 Express.js 来处理前端请求，并动态发送分页数据到前端。它读取 CSV 文件数据，并在 GET /data 路由中返回相应的数据。

/* 后端代码 */
const express = require('express');
const fs = require('fs');

const app = express();

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

// 读取 CSV 文件数据
let data = fs.readFileSync('data.csv', 'utf-8');

// 解析 CSV 数据
let json = parseCSV(data);

app.get('/data', (req, res) => {
  // 获取当前页码和每页数据量
  let page = parseInt(req.query.page) || 1;
  let dataPerPage = parseInt(req.query.dataPerPage) || 10;

  // 计算总页数
  let totalPages = Math.ceil(json.length / dataPerPage);

  // 检查页码是否有效
  if (page < 1 || page > totalPages) {
    res.status(400).json({ error: 'Invalid page number' });
  } else {
    // 发送当前页数据
    res.json({
      data: json.slice((page - 1) * dataPerPage, page * dataPerPage),
      totalPages: totalPages
    });
  }
});