Как подписать пагинацию таблицы: диапазон строк и число результатов

Подпись пагинации таблицы должна отвечать на два вопроса: какую часть списка человек видит сейчас и сколько записей подходит под текущий запрос. Формула «1–20 из 327» решает обе задачи, если число 327 относится к результатам после фильтрации. Ниже — схема для обычных, последней и пустой страницы, а также варианты для узкого экрана.

Пагинация — служебная подпись и набор переходов, которые помогают ориентироваться в длинном списке. Хорошая подпись не заставляет пользователя считать страницы или запоминать, сколько записей было в предыдущем состоянии. Она называет начало и конец видимого диапазона и общее количество строк в выборке. Например: «Показаны 21–40 из 327 записей». Человек понимает, что открыт второй фрагмент списка, а результатов всего 327.

Не смешивайте три разных числа: номер страницы, число записей на странице и число результатов. При размере страницы 20 страница 2 — это не «20 записей» и не «20 из 327», а записи с 21-й по 40-ю. Поэтому подпись диапазона обычно информативнее короткого «2 из 17». Номер страницы можно оставить в навигационных кнопках, а под таблицей показывать диапазон и итог.

Сначала решите, нужен ли пользователю точный счётчик. Для административного реестра, заказов или результатов поиска точное число помогает оценить объём работы. Для бесконечной ленты или списка, который подгружается по мере прокрутки, счётчик может быть неизвестен или быстро устаревать. Не показывайте выдуманное «всего», если система знает только загруженные строки: подпишите факт загрузки, например «Показано 20 записей», или скройте итог.

Для нумерации с единицы начало диапазона рассчитывается как номер страницы минус один, умноженный на размер страницы, плюс один. Конец — меньшее из двух значений: начало плюс размер страницы минус один или общее число результатов. Это внутренний расчёт компонента; в редакторе его можно проверить на нескольких страницах. При нуле результатов формулу не применяют, потому что диапазона нет.

Предположим, после фильтрации осталось 327 записей, а на странице показывается 20. Первая страница подписывается «Показаны 1–20 из 327», вторая — «Показаны 21–40 из 327». На последней, семнадцатой, видны записи 321–327, поэтому правильная подпись — «Показаны 321–327 из 327». Не дописывайте диапазон до 340: он описывал бы воображаемые строки, которых в выборке нет.

Слова зависят от контекста: «записи», «товары», «заявки», «файлы». Нейтральное «строки» годится для инструмента работы с таблицами, но в клиентском сервисе полезнее назвать объект. Если рядом стоит заголовок «Заказы», подпись «1–20 из 327» может быть достаточной; если несколько типов данных соседствуют, добавьте существительное: «Показаны 1–20 из 327 заказов». Главное — не повторять длинный заголовок таблицы без необходимости.

Общий итог должен соответствовать текущему набору данных. Если человек выбрал фильтр «Ожидают подтверждения» и получил 18 строк из общего реестра в 327 записей, подпись пагинации должна сообщать «Показаны 1–18 из 18 заявок», а не «из 327». Иначе интерфейс одновременно утверждает, что результат равен 18 и 327. При необходимости исходный объём можно показать отдельно, например в описании фильтра, но не смешивать его с итогом списка.

После изменения фильтра или поискового запроса возвращайте человека к началу нового набора. Иначе он может остаться на странице 8, хотя от прежнего списка после отбора осталась только одна страница. Это даёт пустую таблицу при ненулевом результате и делает диапазон бессмысленным. Сбросите номер страницы, затем обновите список, диапазон и подпись в одном состоянии интерфейса.

Сортировка меняет порядок, но сама по себе не меняет количество записей. После сортировки «из 327» остаётся тем же, а «1–20» описывает позиции уже в новом порядке. Если таблица поддерживает выбор строк, уточните, что выбранные записи — отдельный счётчик. Например, «Выбрано 3» и «Показаны 1–20 из 327» отвечают на разные вопросы; объединение их в одну фразу перегружает служебную область.

Выбор «20 на странице» отвечает на вопрос, сколько строк поместить в одном фрагменте, а не сколько всего найдено. Разместите размер страницы рядом с пагинацией, но визуально отделите его от счётчика. Подпись «Строк на странице» у поля выбора точнее, чем одиночное «Показать 20»: последнее можно принять за ограничение количества результатов. После выбора нового размера обновите диапазон, но сохраните понятное место в данных, если это возможно; если позиция пересчиталась, покажите корректные новые номера.

Предложите только несколько осмысленных размеров, подходящих продукту и устройству, а не длинный список. На маленьком экране пользователю может быть удобнее меньше строк, но слишком частые переходы тоже утомляют. Проверьте реальные сценарии: найти конкретную заявку, просмотреть новые поступления, сверить весь экспортируемый список. Размер по умолчанию выбирайте для типичной задачи и ширины рабочей области, затем дайте возможность изменить его.

Если поиск ничего не нашёл, не выводите «Показаны 1–0 из 0»: это выглядит как ошибка в расчёте. Покажите короткое состояние «Ничего не найдено» и, если есть активные фильтры, предложите изменить запрос или сбросить фильтры. Не отображайте кнопки перехода, которые не ведут к странице. При этом объяснение должно различать пустой исходный список и отсутствие совпадений после пользовательского отбора.

Бывает и устаревшая ссылка: пользователь открыл страницу 5, но записи удалены, и после обновления осталось только две страницы. Перенаправьте его на последнюю существующую страницу либо на первую — выбор зависит от продукта, но подпись, таблица и состояние навигации должны обновиться согласованно. Не оставляйте диапазон вроде «81–60 из 60» и активную кнопку текущей страницы, которой больше нет.

Когда число результатов ещё неизвестно, например сервер считает его отдельно, не подставляйте временный ноль. Используйте нейтральную загрузочную подпись или оставьте итог скрытым до ответа. Если счётчик точный только после полного запроса, не объявляйте его мгновенно при устаревших данных. Подпись должна описывать таблицу, которую человек видит сейчас, а не результат предыдущего запроса.

Подпись обычно вторична по отношению к таблице, поэтому ей не нужен крупный выразительный кегль. Сделайте цифры различимыми, оставьте достаточный контраст и расстояние до кнопок перехода. Не превращайте весь счётчик в декоративную надпись авторским рукописным шрифтом: в служебных данных скорость сканирования важнее характера. Если такой шрифт является частью продукта, проверьте особенно цифры 0, 1, 6, 8, тире и кириллическое окончание слова в малом размере.

На узком экране полная фраза может занять место для самих кнопок. Сократите формулировку до «21–40 из 327», если заголовок раздела и подпись рядом ясно указывают, что считаются заявки. Не скрывайте итог без причины и не уменьшайте текст до неразборчивого размера. Перенос строки допустим, если элементы управления остаются рядом с таблицей и порядок чтения не нарушается.

Разделитель диапазона должен визуально восприниматься как интервал: «21–40», а не два независимых числа. Используйте один и тот же знак во всех местах интерфейса и не заменяйте его дефисом случайным образом в разных экранах. Для локализованных продуктов проверьте, что порядок «показанный диапазон — итог» привычен аудитории, а перевод не расширяет подпись настолько, что навигация распадается.

Допустим, оператор смотрит список обращений: всего в системе 684 заявки, выбран фильтр «Новые», найдено 46, размер страницы — 20. Корректное состояние первой страницы: «Показаны 1–20 из 46 новых обращений». После перехода на вторую: «Показаны 21–40 из 46 новых обращений». Последняя страница: «Показаны 41–46 из 46 новых обращений». В выборе строк отдельно указано «Выбрано 2 обращения».

Если оператор меняет фильтр на «Закрытые», сначала сбрасывается текущая страница, затем обновляется выборка и её счётчик. Если закрытых обращений 0, появляется объяснение, а навигационные кнопки исчезают. Если для диапазона используются короткие подписи, строка может выглядеть как «1–20 из 46», но заголовок и фильтр должны однозначно задавать контекст. Такой пример помогает проверить не только макет, но и логику компонента.

«Показано» относится к строкам, которые сейчас видны в таблице. «Найдено» описывает итог поиска или фильтра, в том числе если часть совпадений находится на других страницах. Можно объединить оба смысла: «Показаны 1–20 из 46 найденных заявок».

Не всегда. Если возле подписи есть кнопки перехода и видимое состояние текущей страницы, точный диапазон строк часто лучше объясняет объём списка. Число страниц полезно, если оно помогает планировать навигацию, но не должно подменять итоговое количество результатов.

Если система не знает итог заранее, сообщите только то, что подтверждено: например, «Загружено 20 записей». Не добавляйте слово «из» с предположительным значением. После получения точного количества замените подпись на актуальную без резкого изменения состояния таблицы.

Покажите диапазон от первой до последней найденной строки и итог, например «Показаны 1–7 из 7». Не оставляйте пустое место до лимита размера страницы и не пишите «1–20». Навигация вперёд в этом состоянии не нужна.

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

Можно, если цифры, диапазон и короткая подпись уверенно читаются в рабочем размере и не замедляют сканирование. Сравните реальный пример с цифрами 1, 7 и 0, а также с тире и знаками интерфейса. Если цифры слипаются, оставьте рукописный шрифт для акцентов, а служебный счётчик наберите более нейтрально.

Понятная подпись пагинации показывает текущий диапазон и итог именно той выборки, которую создали фильтры и поиск. Проверяйте обычную, последнюю, пустую и устаревшую страницу — на этих состояниях чаще всего проявляются ошибки. Если вы оформляете собственный шрифт для интерфейса или сервиса, создайте тестовую строку пагинации в Fontgenerator и проверьте цифры и знаки в реальном размере.

Для проверки авторского шрифта на рабочих фрагментах интерфейса используйте Fontgenerator.