Протестированы следующие сетки
- DataTables
- Угловая сетка UI
- Slick Grid
- начальная загрузка
Наблюдение:
- Сетка Datatables и Bootstrap очень медленная
- Гладкая сетка не активна на данный момент
- Сетка углового интерфейса не поддерживает или имеет все параметры экспорта
Какова самая быстрая сетка данных, которая имеет следующие особенности
- поиск
- пагинация
- Пример HTML
- Параметры экспорта - CSV, копировать в буфер обмена, PNG, Word, Excel, CSV, PNG, XML
3 ответа
Моя любимая библиотека таблиц - это Bootstrap-Table
Он имеет все функции, которые вы ищете, и работает довольно хорошо.
Для достижения достойного времени загрузки на 10 000+ записей вам, скорее всего, потребуется использовать AJAX и / или Pagination.
Вот фрагмент, показывающий 5000 результатов, работающих нормально:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>
<body>
<table data-toggle="table"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="client"
data-url="https://jsonplaceholder.typicode.com/photos">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="title">Title</th>
<th data-field="url">URL</th>
<th data-field="thumbnailUrl">Thumbnail URL</th>
</tr>
</thead>
</body>
</html>Здесь происходит несколько вещей, которые улучшают производительность:
Так как данные поступают в библиотеку более естественным образом, мы получаем приятную «Загрузка ...», которая делает пользователей внутри теплыми и суетливыми. Если не только потому, что он дает обратную связь пользователю. Поэтому мы готовы подождать несколько лишних секунд.
Мы переключаемся с таблицы HTML с данными в ней на объект JSON.
При использовании HTML для источника данных страница должна полностью отображать слишком подробное представление данных (это блокирует загрузку формы JavaScript). Затем библиотека загружает и начинает анализ этих данных (5000 строк X 10 столбцов = 50000 элементов). Затем библиотека должна применить свою логику к DOM. В зависимости от того, как написан код, это будет означать обработку всех результатов в 3 раза.
Или
При использовании JSON (JavaScript Object Notation) HTML-страница очень легкая, поэтому она немедленно завершает рендеринг. Кроме того, данные на языке JavaScript являются родными и, следовательно, они считываются непосредственно в объект JavaScript. Библиотека создает объект и связывает его с содержимым таблицы. Это означает, что для начала рендеринга требуется добавить 1 объект для таблицы.
По сути, мы добавляем параллелизм в рендеринг результатов. Таким образом, все 3 шага все еще происходят, но в первом случае каждый шаг должен ждать следующего. Тогда как в последнем случае шаги происходят параллельно. И так как мы чувствуем, что он завершил загрузку, как только он рендерит 1 строку, он чувствует себя намного быстрее.
Добавлен экспорт по вашему запросу, но фактические ошибки библиотеки, вероятно, являются ограничением инструмента сниппета.
10К данных очень большие для обычного клиента. Не имеет значения, какой компонент JS. DataTables BootStrap и т. Д. Работают очень медленно, потому что оперативной памяти клиента недостаточно для отображения данных по 10 КБ.
Не уверен, что вы можете использовать React, но вы уже зарегистрировались https://react-table.js.org или https://facebook.github.io/fixed-data-table? Похоже, что они оба соответствуют всем в вашем списке, кроме для экспорта.
В общем, экспортировать в разные форматы сложно, поэтому на есть множество https://www.npmjs.com <. / a> которые специально занимаются экспортом данных в разные форматы.
Удачи!
Связанные вопросы
Новые вопросы
javascript
Для вопросов, касающихся программирования в ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (исключая ActionScript). Этот тег редко используется отдельно, но чаще всего ассоциируется с тегами [node.js], [jquery], [json] и [html].