滚动加载表格数据，轻松搞定表格数据量大难题！

前端

2023-03-09 06:01:57

滚动加载：提升表格性能与用户体验

实现思路

在实际应用中，表格往往需要展示大量数据。如果直接将所有数据加载，将耗费内存，拖慢页面加载速度，影响用户体验。滚动加载提供了一个有效解决方案，可以分批加载数据，保证表格性能的同时，提升用户体验。

具体实现步骤

监听表格滚动事件： 在表格元素上添加一个滚动事件监听器。
判断滚动位置： 在滚动事件处理函数中，判断表格是否滚动到底部或顶部。
加载数据： 表格滚动到底部时，加载更多数据；滚动到顶部时，加载第一页数据。

注意事项

判断是否加载更多数据时，需确认表格中是否还有未加载的数据。
加载数据时，需要指定行数参数，指定从第几行开始返回部分数据。

代码示例

// 监听表格滚动事件
const table = document.querySelector('.ant-table-body');
table.addEventListener('scroll', (e) => {
  // 判断滚动位置
  if (table.scrollTop + table.clientHeight >= table.scrollHeight) {
    // 滚动到底部，加载更多数据
    loadMoreData();
  } else if (table.scrollTop === 0) {
    // 滚动到顶部，加载第一页数据
    loadFirstPageData();
  }
});

// 加载更多数据
const loadMoreData = () => {
  // 获取当前表格数据量
  const currentDataCount = table.querySelector('.ant-table-row').length;

  // 计算加载数据量
  const loadDataSize = 10;

  // 向后端发送请求，加载数据
  const data = await requestData({
    start: currentDataCount,
    size: loadDataSize,
  });

  // 添加数据到表格
  data.forEach((item) => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.address}</td>
    `;
    table.appendChild(tr);
  });
};

// 加载第一页数据
const loadFirstPageData = () => {
  // 向后端发送请求，加载数据
  const data = await requestData({
    start: 0,
    size: 10,
  });

  // 添加数据到表格
  data.forEach((item) => {
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.address}</td>
    `;
    table.appendChild(tr);
  });
};