我怎样才能在用户能够搜索数据的同时，懒加载一个表？

Question

所以，我有大量的数据要加载到一个表格中。桌子 ，可能有数千行，我从一个新的系统中获取数据。API.

现在，我有一个明显的问题，DOM会花这么多时间来渲染。

我上网查了一下 懒加载 我认为这可能是一个解决方案，但我不确定，因为用户可以 查资料 (前端搜索)，所以如果数据在DOM中都没有呈现的话，恐怕是不可能的。

我要求用javascript解决，即使要用库之类的。

谢谢你

Answer 1

你有几个选择。

• 尽可能在后端进行搜索
• 只把数据加载到一个Javascript数组中，然后每次只渲染一小部分，然后搜索数组。

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

编辑

好吧，如果把搜索功能放在后台是不可能的，那么在浏览器中存储和搜索一个表的数千行还是相当容易的。下面的工作示例会随机生成10000行数据，最多显示其中15行符合用户搜索的数据。添加分页应该不是什么难题。在最后的循环中，第一页是j < 15的值。所以对于第2页打印15≤j &lt；30时的行，对于第3页打印30≤j &lt；45时的行，等等。

对于内存的消耗，重要的是不要把所有的数据都存储在DOM中，只需要隐藏用户不该看到的行。在这个例子中，只有曾经15 <tr> DOM中的元素，所有的数据都存储在一个数组中，只有用户的当前视图才会被呈现。

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>