Как я могу lazyload таблицу, пока пользователь имеет возможность поиска данных в ней? - PullRequest
Новая
       85

Как я могу lazyload таблицу, пока пользователь имеет возможность поиска данных в ней?

0 голосов
/ 04 мая 2020

Итак, у меня есть огромное количество данных для загрузки в таблицу , может быть, тысячи строк, и я извлекаю данные из API .

Сейчас У меня есть очевидная проблема, что DOM займет так много времени, чтобы сделать. потому что пользователь может искать данные (интерфейсный поиск), поэтому я боюсь, что это будет невозможно, если данные даже не отображаются в DOM.

Я спрашиваю для решения javascript, даже если мне нужно использовать библиотеку или около того.

Спасибо!

1 Ответ

0 голосов
/ 04 мая 2020

У вас есть несколько вариантов здесь:

  • Выполните поиск на сервере, если это возможно
  • Загрузите данные только в массив Javascript, затем просто визуализируйте небольшой фрагмент за раз и ищите массив.

Кажется маловероятным, что вам понадобится библиотека, поиск содержимого массива данных должен быть простым.

Редактировать

Ладно, если функция поиска на бэкэнде невозможна, все равно довольно легко сохранять и искать тысячи строк таблицы в браузере. Приведенный ниже рабочий пример генерирует 10000 строк случайных данных и отображает до 15 из них, соответствующих запросу пользователя. Добавление нумерации страниц не должно быть сложным. В последней l oop на первой странице указаны значения j <15. Таким образом, для страницы 2 выведите строки, где 15 ≤ j <30, для страницы 3 напечатайте, когда 30 ≤ j <45, et c. </p>

Важная вещь для потребления памяти - не хранить все ваши данные в 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>
...