HTML表格导航实现方法大全

// 假设我们有数据和表格渲染函数
function sortTable(columnIndex, dataType) {
  const tbody = document.getElementById('tableBody');
  const rows = Array.from(tbody.rows);
  const isAsc = tbody.dataset.sortOrder === 'asc' && tbody.dataset.sortColumn === columnIndex;

  rows.sort((a, b) => {
    let valA = a.cells[columnIndex].textContent;
    let valB = b.cells[columnIndex].textContent;

    if (dataType === 'number') {
      valA = parseFloat(valA);
      valB = parseFloat(valB);
    } else if (dataType === 'date') {
      valA = new Date(valA).getTime();
      valB = new Date(valB).getTime();
    }
    // 更多数据类型处理...

    if (valA < valB) return isAsc ? -1 : 1;
    if (valA > valB) return isAsc ? 1 : -1;
    return 0;
  });

  // 清空并重新添加排序后的行
  rows.forEach(row => tbody.appendChild(row));
  tbody.dataset.sortOrder = isAsc ? 'desc' : 'asc';
  tbody.dataset.sortColumn = columnIndex;
  // 更新表头箭头指示
}

// 示例：给某个表头添加点击事件
// document.getElementById('header_column_index').addEventListener('click', () => sortTable(columnIndex, 'number'));

筛选功能则是另一种强大的数据定位工具。它允许用户根据一个或多个条件来缩小数据的范围。最常见的形式是文本输入框，用户输入关键词后，表格只显示包含该关键词的行。更复杂的筛选可以是下拉菜单（比如按“状态”筛选）、日期选择器（按“日期范围”筛选），甚至多选框（按“多个标签”筛选）。

筛选的实现逻辑通常是遍历表格的每一行，检查该行是否符合筛选条件。如果不符合，就将该行隐藏（row.style.display = 'none'）；如果符合，则显示（row.style.display = ''）。当有多个筛选条件时，需要确保所有条件都满足（逻辑AND）或任意一个条件满足（逻辑OR），这取决于业务需求。

// 简单的文本筛选
function filterTable(searchText) {
  const tbody = document.getElementById('tableBody');
  const rows = Array.from(tbody.rows);
  const lowerCaseSearchText = searchText.toLowerCase();

  rows.forEach(row => {
    const rowText = row.textContent.toLowerCase();
    if (rowText.includes(lowerCaseSearchText)) {
      row.style.display = '';
    } else {
      row.style.display = 'none';
    }
  });
}

// 示例：给一个搜索框添加输入事件
// document.getElementById('searchInput').addEventListener('input', (e) => filterTable(e.target.value));

将排序和筛选结合起来使用，用户就能非常灵活地探索数据了。比如，先筛选出“已完成”的项目，再按“完成日期”排序。这种多维度的数据操作，正是提升用户体验的关键。

面对海量数据，如何优化HTML表格的加载性能和交互流畅性？

当数据量达到“海量”级别时，我们之前讨论的那些方法可能就有点力不从心了。几万条数据还能凑合，但如果几十万、上百万条，甚至更多，传统的DOM操作和一次性渲染就完全行不通了。这时候，优化策略就需要更深入，更注重性能。

1. 搜索功能：客户端与服务器端

对于表格的搜索，如果数据量不大，客户端搜索（即在浏览器端遍历所有数据进行匹配）是快速且响应及时的。但一旦数据量巨大，客户端搜索会变得非常慢，甚至导致浏览器卡顿。这时，服务器端搜索是唯一的出路。用户输入关键词后，前端立即将关键词发送给后端API，后端在数据库层面进行高效的全文搜索或模糊匹配，然后只返回匹配到的数据。这要求后端有强大的搜索能力（比如使用Elasticsearch、Solr或数据库自带的全文检索功能）。

2. 固定表头和列：提升横向/纵向滚动体验

对于列数或行数非常多的表格，用户在横向或纵向滚动时，如果表头或关键列消失，很容易迷失方向。固定表头和固定列就是解决这个问题的。

• CSS position: sticky： 这是现代浏览器比较推荐的方式，简单高效。你只需要给