Любой человек, который провел в интернете более 3,5 секунд, сталкивался с постраничной разбивкой длинных списков чего угодно. Сегодня я хочу поговорить об их видах, достоинствах и недостатках каждого. Но сначала давайте разберемся, зачем нужна постраничная разбивка. Так нам будет проще обозначить достоинства и недостатки каждого подхода.

Сегодня практически все данные, доступные в интернете, хранятся в базах данных. Рассмотрим абстрактный интернет-магазин: в нем список категорий и товаров магазина хранится в виде таблицы записей, каждая строка которой соответствует одной категории либо товару. И если в случае категорий такая таблица, как правило, не превышает 20-30 строк, то товаров могут быть сотни, тысячи и даже десятки тысяч.

При таких объемах данных возникает ряд проблем:

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

Именно эти проблемы и призвана решать постраничная разбивка. Однако если не уделить этому элементу достаточно внимания, то он может серьезно испортить удобство вашего сайта, и пользователь к вам больше никогда не вернется.

Рассмотрим наиболее популярные варианты постраничной разбивки:

Неограниченный список страниц

Неограниченный список страниц удобен там, где страниц немного Неограниченный список страниц удобен там, где страниц немного

Этот вариант наиболее простой и с точки зрения программирования и с точки зрения использования… до тех пор, пока страниц не больше дюжины. Пользователь видит, сколько всего доступно страниц, и легко может перейти на любую из них. Но что если страниц 200? Список цифр от 1 до 200 нельзя назвать наглядным или удобным.

Достоинства:

  • Пользователь видит, сколько всего доступно страниц
  • Пользователь может легко перейти на любую станицу
  • Можно получить ссылку на любую страницу списка

Недостатки:

  • Навигация усложняется с ростом количества страниц

Навигационные ссылки

Cсылки навигации идеально подходят для блогов Cсылки навигации идеально подходят для блогов

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

Достоинства:

  • Нет ничего проще, чем нажать «Назад» или «Далее»
  • Можно получить ссылку на любую страницу списка

Недостатки:

  • Совершенно не ясно, сколько всего страниц
  • Пользователь не может перейти на произвольную страницу

Ограниченный список страниц со ссылками навигации

Такой вариант постраничной разбивки безнадежно устарел Такой вариант постраничной разбивки безнадежно устарел

Комбинация первых двух типов. Номера страниц представлены группами по 5, 10, 15 ссылок, а ссылки навигации позволяют перемещаться между группами. Недостаток в том, что, находясь на первой странице, невозможно сразу перейти к странице 231 без дополнительных навигационных элементов.

Достоинства:

  • Позволяет уместить любое количество страниц
  • Можно перейти на любую страницу списка
  • Можно получить ссылку на любую страницу списка

Недостатки:

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

Ограниченный список страниц с плавающей группой

Гугл знает толк в постраничной разбивке Гугл знает толк в постраничной разбивке

Усовершенствованная версия предыдущего пункта. Тут по-прежнему есть группа страниц, однако она отсчитывается от активной в данный момент страницы. Если вы находитесь на первой странице, то видите страницы от 1 до 10, если же вы находитесь на странице 10, то видите страницы от 5 до 15. На мой взгляд, это наиболее удобный вариант, не требующий программирования на стороне клиента.

Достоинства:

  • Позволяет уместить любое количество страниц
  • Можно перейти на любую страницу списка
  • Можно получить ссылку на любую страницу списка

Недостатки:

  • Переход на произвольную страницу списка затруднителен

Фоновая загрузка следующей страницы

Ещё записей, ХОЧУ ЕЩЁ ЗАПИСЕЙ! Ещё записей, ХОЧУ ЕЩЁ ЗАПИСЕЙ!

С приходом эры веб-приложений появились новые виды постраничных разбивок. В этом варианте нет никаких номеров страниц, только кнопка «еще» в конце списка. Когда пользователь нажимает на эту кнопку, следующая страница загружается в фоне и новые записи добавляются в конец списка. Если достигнут конец списка, кнопка исчезает, а пользователь получает полный список записей. Недостатком является невозможность сделать закладку на конкретную страницу списка.

Достоинства:

  • Навигация по списку существенно упрощена по сравнению с традиционными решениями

Недостатки:

  • Совершенно не ясно, сколько всего страниц
  • Невозможно перейти на произвольную страницу списка
  • Невозможно получить ссылку на произвольную страницу списка

Автоматическая фоновая загрузка

На создание этого скриншота я потратил 45 минут На создание этого скриншота я потратил 45 минут

Небольшое улучшение предыдущего варианта. Суть заключается в том, что по достижении последних записей загрузка следующей страницы осуществляется автоматически. Это создает впечатление непрерывного потока информации. При такой схеме работы нельзя забывать, что если у вашего списка нет вменяемых пределов (например, если вы – Павел Дуров), то ссылки в футере увидят только пользователи модемной связи.

Достоинства:

  • Навигация по списку существенно упрощена по сравнению с традиционными решениями
  • Использование такого решения оставляет ощущение естественности, так как использует стандартные элементы интерфейса системы

Недостатки:

  • Совершенно не ясно, сколько всего страниц
  • Невозможно перейти на произвольную страницу списка
  • Невозможно получить ссылку на произвольную страницу списка
  • Загрузку следующей страницы невозможно остановить (а-а-а!)

Заключение

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

Кроме того, можно использовать javascript для оживления постраничной разбивки, например загружать новые страницы с помощью ajax (не забудьте сделать странице уникальную ссылку). Я намеренно не рассматривал интересные и нестандартные решения, которые можно встретить в интернете. Примеры таких решений я предлагаю оставлять и обсуждать в комментариях.