Загрузка данных в таблицах
При использовании таблицы скорее всего вам не хватит места, чтобы уместить все ее записи на экране. Чтобы не перегружать страницу избыточной информацией и для удобства пользователя данные внутри таблицы скроллятся. И лучшим вариантом считается, когда скроллится именно тело таблицы, а не вся страница, таким образом пользователю остаются доступны все необходимые кнопки действия и фильтры, а данные просматриваются в понятной зоне.
Однако нельзя просто взять и вывести все данные разом, это мешает пользователю ориентироваться, данные должны выдаваться порционно, чтобы пользователь не запутался, а страница не умерла от избыточного количества записей.
Поэтому в web было принято два основных типа отображения и подгрузки данных в таблице:
- Пагинация — разделение данных на отдельные страницы с фиксированным количеством элементов на каждой.
- Ленивая загрузка — динамическая подгрузка данных по мере прокрутки таблицы.
Сценарии применения
Пагинация используется при:
- Работе с относительно небольшим набором данных (например до 1000 записей).
- Когда важна точная навигация между страницами.
- При необходимости быстрого доступа к конкретной странице.
- В случаях, когда данные часто обновляются.
- Когда важна простота реализации.
Ленивую загрузку оптимально использовать при:
- Работе с большими наборами данных (например более 1000 записей).
- Когда важна экономия ресурсов при загрузке.
- На слабых устройствах, когда процессорной или видеопамяти не хватает, чтобы отрендерить большой объем записей таблицыю
- На мобильных устройствах, где подходи пагинации просто не удобен, а так же важна производительность.
Сортировка данных
Пагинация
- При сортировке одного столбца сортируются все данные относительно этого столбца.
- Смена страницы не сбрасывает сортировку, при переходе данные уже отсортированы.
- При изменении критерия сортировки может потребоваться дополнительный запрос.
Ленивая загрузка
Сортировка данных при ленивой загрузке подразумевает реализацию сортировки на стороне сервера, так как загрузка всего набора данных в память для локальной сортировки невозможна. Для этого необходимо отправлять запрос на сервер с указанием столбца для сортировки и направления, а сервер должен вернуть отсортированный набор данных.
- Пользователь кликает по заголовку столбца или выбирает опции сортировки в интерфейсе, передавая запрос на сервер.
- Клиент формирует запрос на получение данных, указывая:
- Столбец для сортировки.
- Направление сортировки.
- Параметры текущего диапазона данных.
- Сервер получает запрос, извлекает данные из базы данных, применяет к ним фильтр и сортировку по указанным параметрам.
- Сервер возвращает отсортированные данные, которые затем отрисовываются в таблице клиента, включая данные в соответствии с параметрами сортировки по мере прокрутки.
Фильтрация
Пагинация
- Фильтрация применяется ко всем данным.
- При изменении фильтров изменяется и количество страниц.
- Может потребовать полной перезагрузки данных.
Ленивая загрузка
Ленивая загрузка предполагает применение фильтров непосредственно на стороне источника данных (на сервере или в базе данных) перед загрузкой данных в клиентское приложение, чтобы в таблицу попадали только необходимые строки. Это улучшает производительность и уменьшает объем загружаемой информации.
- Таблица не грузится целиком. Вместо этого отправляется запрос к источнику данных с необходимыми критериями фильтрации.
- Сервер или база данных обрабатывают запрос и возвращают только те данные, которые соответствуют вашим фильтрам. Этот "ленивый" подход экономит трафик и память.
- Полученные отфильтрованные данные загружаются в таблицу на стороне клиента. При этом таблица содержит только те строки, которые были выбраны на этапе запроса.
Такой подход значительно ускоряет работу приложения, но сложнее в реализации.
Массовые операции
Принцип массового изменения данных при пагинации и при ленивой загрузки с точки зрения UX мало чем отличаются. Вы можете ознакомиться с ними по этой ссылке. Однако в этой статье будут описаны некоторые различия:
Пагинация
При использовании пагинации действует принцип постраничного выбора. То есть сколько у вас есть записей на станице, столько и будет выбрано, а UI подскажет об этом в футере таблицы.
- Если необходимо выбрать все записи, то есть два варианта развития событий:
- Нужно перейти на каждую страницу и повторить операцию выбора.
- Нужно нажать кнопку в футере таблицы, которая выберет все доступные данные и сообщит об этом, когда выбор будет закончен:
- Чтобы снять выбор, нужно снова нажать на мастер-чекбокс, либо кнопку сбросить в футере таблицы.
Ленивая загрузка
При ленивой загрузке подход визуально отличается мало. Пропадают кнопки пагинации в правой части таблицы, а сам текст футера просто меняет информацию о количестве записей.
При клике на мастер-чекбокс выбирается только набор загруженных данных. Чтобы выбрать все отфильтрованные данные, необходимо нажать на кнопку “Выбрать все”. Тогда отправится запрос на сервер, что вы хотите изменить все данные которые есть в таблице. Такие операции считаются долгими, так что пока будет происходить выбор, таблица заблокируется с помощью прелоадера, а кнопки должны перейти в состояние disabled.
Чтобы сбросить выбранные данные необходимо либо нажать на кнопку “Сбросить” в футере таблицы, либо нажать на мастер-чекбокс. данные будут сброшены, а фильтры останутся такими же.
Что и когда выбирать?
Используйте Пагинацию, если вам необходимо пользоваться относительно небольшими таблицами, с небольшим количеством столбцов и строк и как итог – данных. Такие таблицы проще проектировать и сопровождать, там меньше работы с сервером.
Используйте Ленивую загрузку, если вам необходимо реализовать таблицу с большим количеством столбцов и строк и как итог - большим количеством данных. Можно ориентироваться на цифру 1000 - если в вашей таблице в итоге будет больше 1000 записей, следует использовать ленивую загрузку. Если нет - используйте пагинацию.