Отзывчивая таблица JavaScript для загрузки 20 тыс. записей за 2 или 3 секунды

Я ищу отзывчивую таблицу JavaScript, которая загружает и обрабатывает не менее 20 тыс. записей в течение 2 или 3 секунд и имеет множество вариантов:

  • CSV
  • Скопировать в буфер обмена
  • Экспорт Excel, PDF, текст, PNG, Word, JSON
  • Видимые столбцы

Он должен быть с открытым исходным кодом.

Вот те, что я нашел:

  • Swimlane — пока не активен. Обновлений давно нет.
  • Angular UI Grid — использует ng:repeat, который замедляет рендеринг.
  • Slick Grid — пока не активен. Обновлений давно нет.
  • Таблицы данных
Это не кажется значительным объемом данных даже за одну секунду, поэтому, вероятно, вы говорите, что у вас «много вариантов». Можете ли вы дать нам больше требований? Например, это особенно огромные записи? Что не так с теми, кого вы называете? Кстати, если это занимает так много времени, покажите индикатор выполнения ( ux.stackexchange.com )
Кроме того, вы можете рассмотреть «виртуальную таблицу». Это таблица, которая старит все 20 тысяч записей в памяти, но отображает только 20 или 30 в скользящем окне на экране в любое время. Поскольку именно дисплей требует реального времени и памяти, этот метод используется уже давно.

Ответы (3)

Таблицы данных должны поддерживать большие записи, даже на стороне сервера . Если вам нужна помощь для более быстрой передачи данных по сети, вам может понадобиться потоковый API или какой-нибудь метод ajax, например comet.

jqGrid или другая библиотека jQuery также должны подойти .

Если вы хотели задать загрузку по проводу, возможно, измените заголовок или задайте другой вопрос.

Загрузка 20000 должна быть крайне максимальной, которую следует реализовать. Я предполагаю, что загрузка от 5 до 10 тысяч данных за один раз может работать для какой-то задачи и загружать другой пакет, пока пользователь просматривает половину из них. Протестируйте свой сценарий в обычном браузере или даже в мобильном браузере, чтобы получить максимальную строку, которую вы хотите получить.

Я использовал DataTables в прошлом. У него хороший API и документация. Возможно, вам придется контролировать загрузку ваших 20 000 записей, а не пытаться найти инструмент, который загрузит эти 20 000 строк за один раз.

почему производительность до сих пор не зафиксирована в data-таблицах? Есть ли обходной путь для решения проблемы с производительностью? Может ли какое-либо исправление, сделанное в гладкой сетке или другой сетке, быть включено в таблицы данных ... 20k - это очень меньше в корпоративном приложении.
Вы имеете в виду, что есть пользователи, которым нужно прочитать 20 тысяч строк за один раз? Вы должны попробовать использовать пагинацию. Пагинация должна разбить 20k на 40 или более страниц, что позволит загрузить страницу за 2 или 3 секунды, а кнопка загрузки должна загрузить все данные.
Здесь вы можете узнать больше о нумерации страниц и имеющихся у вас опциях. datatables.net/examples/basic_init/alt_pagination.html
нумерация страниц прерывает поиск во всей таблице.... можем ли мы искать в целых записях, даже если установлена ​​нумерация страниц?
В этой демонстрации все работает нормально... phpflow.com/php/…
Это всего лишь 568 записей, а не 20 000 записей.
Возможно, вам следует спросить об этом DataTables. Должна быть причина, по которой он работает с 568 записями, а не с 20k. Вы также можете обратиться к этому FAQ datatables.net/faqs/#General-initialisation

Сетка DHTMLX — это то, что я использую для любого пользовательского интерфейса javascript.

В сочетании с соединителем DHTMLX на стороне сервера я могу отображать таблицы с миллионами записей в нулевое время.

Как это работает:

  • сетка javascript настроена и инициализирована на клиенте, для параметра smartrendering установлено значение ture, а количество записей для рендеринга установлено на 100.
  • когда сетка загружает свои первые данные, она автоматически запрашивает у сервера количество строк, которые необходимо отобразить, и список первых 100 записей.
  • когда пользователь прокручивает или фильтрует, запросы автоматически перенаправляются на сервер, который немедленно представляет ограниченный набор данных, необходимых для отображения на интерфейсе.

Примечание. DHTMLX имеет открытый исходный код, но вы также можете приобрести несколько более простое в использовании решение PRO.

Я не связан с DHTMLX.

«Я могу отображать таблицы с миллионами записей за нулевое время»... Правильно?
:-) нет, просто эмпирическое тестирование