时间戳

首页 > 解决方案 > 当用户能够在其中搜索数据时，我如何才能延迟加载表？

javascript - 当用户能够在其中搜索数据时，我如何才能延迟加载表？

问题描述

所以我有大量数据要加载到表中，可能有数千行，我正在从API获取数据。

现在我有一个明显的问题，即 DOM 将花费大量时间来渲染。

我在谷歌上搜索了延迟加载，我认为这可能是一个解决方案，但我不确定，因为用户可以搜索数据（前端搜索），所以我担心如果数据是不可能的甚至没有在 DOM 中呈现。

即使我必须使用图书馆左右，我也要求提供 javascript 解决方案。

谢谢！

标签： javascriptapidomlazy-loading

解决方案

您在这里有几个选择：

  • 如果可能，在后端进行搜索
  • 仅将数据加载到 Javascript 数组中，然后一次只渲染一小部分，然后搜索数组。

您似乎不太可能需要一个库，搜索数据数组的内容应该很简单。

编辑

好的，如果将搜索功能放在后端是不可能的，那么在浏览器中存储和搜索数千行表仍然相当容易。下面的工作示例生成 10000 行随机数据，并显示最多 15 个与用户搜索匹配的数据。添加分页不应该是具有挑战性的。在最后一个循环中，第一页是 j < 15 的值。因此，对于第 2 页打印行，其中 15 ≤ j < 30，对于第 3 页，当 30 ≤ j < 45 时打印，等等。

内存消耗的重要一点是不要将所有数据存储在 DOM 中，而只是隐藏用户不应该看到的行。在这个例子中，DOM 中只有 15 个<tr>元素，所有数据都存储在一个数组中，并且只呈现用户的当前视图。

const data = [];
const table = document.querySelector('table');
const input = document.querySelector('input');

function printRow(row) {
  // in reality you have to escape data for HTML, this is just a quick demo
  table.insertAdjacentHTML('beforeend', `<tr><td>${row.id}</td><td>${row.r}</td><td>${row.s}</td>`);
}

// Generate dummy data
for (let i = 0; i < 10000; i++) {
  data.push({'id': i,
    'r': Math.random().toString(36),
    's': Math.random().toString(36)});
}

// Display first page of data
for (let i = 0; i < 15; i++) {
  printRow(data[i]);
}

input.addEventListener('input', e => {
  table.innerHTML = '';
  for (let i = 0, j = 0; i < data.length & j < 15; i++) {
    if (data[i].r.indexOf(input.value) >= 0 || data[i].s.indexOf(input.value) >= 0) {
      printRow(data[i]);
      j++;
    }
  }
});
<input>
<table border="1"></table>

推荐阅读