Реализация постраничника

Постраничник - самая обычная вещь для блогов, таблиц, где предусмотрено великое множество данных, которые логично было бы разделять на страницы в виду большой загруженности передаваемых данных, когда большинству пользователей нужен лишь первый десяток последних новостей. Хороший способ сэкономить ресурсы и трафик.
Статья касается вопросов организации постраничников их внешнего вида, эргономики, а также поисковой оптимизации. Мы также коснемся вопросов исполнения при помощи програмных средоств PHP.
Сразу оговорюсь про оптимизацию для поисковиков - файл Sitemaps, помогает обнаружить поисковиками материалы, если они скрыты за пеленой постраничника.

Для организации любого постраничника - нам необходимы следующие исходные данные, которые слегка могут нагрузить систему. Это:

• Общее Количество записей
• Количество записей на страницу (константы)
• Текущая страница (нужно продумать методы получения страницы по адресной строке URL)

То есть максимальная нагрузка берется - на определение общего количества страниц (особенно если их много)

Можно конечно этих данных не узнавать, а по умолчанию предложить, что их - бесконечность. Это возможно только при отсутствии ссылки на последнюю страницу. В этом - если пользователь прыгает на несуществующую страницу - можно уже узнать номер максимальной страницы и просто перенаправлять на нее. Замечу, что поисковикам не очень нравятся ссылки на несуществующие страницы, но это не критично. Это лишь экономия ресурсов в угоду эргономике.

Вычисляемые отсюда параметры - будут:

• Максимальное число страниц
• Если постраничник предполагает листалки по группам - то определяются параметры для групп. Если про группы непонятно - чуть позже их раскрою

Собственно - все. Теперь смотрим какие варианты можно увидеть на разных сайтах. Какие удобны и не удобны - решать Вам, я лишь выражу свое мнение.

1. Элементарный постраничник. Назад - Вперед

На страницах - всего две ссылки - движение на страницу назад и на страницу вперед, при этом можно даже не показывать на какой странице находится пользователь. Это не важно. Зачем пользователю прыгать через страницу, если он читает все по порядку, а не через слово. Зачем пользователю нырять на конец? Там нет особых данных. Захочет нырнуть на начало - нажмет на логотип, на 95% сайтов клик на логотип приводит к возврату на первую страницу
С точки зрения поисковиков - мало ссылок на каждой странице - это хорошо. Поисковики хорошо видят близкие к началу страницы, но плохо достают до прошлых данных.
Можно не рассчитывать количество страниц. Пользователь навряд ли упрется в последнюю2. Классика. Циферки

2. На форумах часто встречаются данный вид. Циферблат с отмеченными цифрами. Примерно имеет такой вид: Первая,n-10^m, n-100, n-10, n-5, n-4, n-3, n-2, n-1,n,n+1,n+2,n+3,n+4,n+5,n+10,n+100,n+10^m,Последняя

Где n -текущая страница. m - порядок. Увеличивается до максимума, пока не будет достигнута крайняя страница.
Мы видим первую страницу, видим последнюю. Можем примерно прыгнуть на большое или небольшое отдаление от текущей страницы

3. Цифры ближайшей страницы

Часто встречаются варианты, с которых возможен переход лишь на пару страниц вперед и назад относительно текущей
Примерно имеет такой вид: Первая,Первая+1, Первая+2, n-3, n-2, n-1, n, n,n+1,n+2,n+3,Последняя-2, Последняя-1, Последняя
Тут уже можно варьировать - отклонение - на 3-5 позиций, где как. Можно убрать отчет от первой или последней страницы, это уже зависит от случая, насколько важна для пользователя первая и последняя страницы. А тем более предпоследняя :)

4. Групповой вариант.

Суть примерно в следующей. Страницы точно также нумеруются, только складываются в группы. Например - в группе - 15 страниц. Пока пользователя находится с 1 по 15 - отображается полностью группа
Назад,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,Вперед
Как только пользователь попадает на 16-ю страницу - отображается следующая группа с 16 по 30 страницы. Пользователь в пару кликов может пролистать и добраться до 45-60 страниц, оценивая материал через каждую 15-ю.
Пример реализации можно посмотреть здесь

5. Полный постраничник. Тупо все страницы подряд.

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

6. Постраничник на основе Javasctipt

Нет смысла делать большой html со ссылкой на каждую страницу. Особенно в случае экономии трафика и размера страницы. Существуют небольшие скрипты, которые автоматически создают постраничник, который можно легко пролистать, и выбрать n-ю страницу, не важно на какой при этом находится пользователь
Пример - можно найти тут. Срзу отмечу, что Javascript плохо влияет на поисковиков, по этому если и использовать вариант - то после открытия страницы с базовым постраничником - наложить современный вариант, учитывая что у некоторых скрипты могут быть отключены

7. Элементарный с Javascript

Первый рассмотренный вариант, дополненный выпадающим списком из всех страниц, реализованый при помощи яваскрипта. Пользователь и поисковик может пролистать страницу по одной, а если нужно прыгнуть куда-нибудь в центр (что бывает достаточно редко - можно использовать стандартный выпадающий список, где все варианты уже заложены). А также в выпадающем списке можно определить текущую страницу
Вариант минимален с точки зрения лишних элементов и удобен. Схожий - используется в стационарных программах таких как Acrobat reader или MS WORD
Список формируется только в момент обращения к постраничнику, по этому не тормозит страницу при загрузке. Достаточно лишь указать общее число страниц и текущую, а также приложить небольшой список из 3-х строк, который будет в зависимости от положения мыши предлагать совершить прыжок на ту или иную страницу
Этот вариант и реализован на данном сайте.

$('.navigator').mousemove(function(event){
   var offset = $(this).offset();
   var topage=Math.floor((event.pageX-offset.left)*parseInt($(this).attr('max'))/100);
   $(this).html( topage ).attr('href',topage);
}).mouseout(function(event){
   $(this).html( $(this).attr('value') ).attr('href',$(this).attr('value'));
});

В данном случае - на сайте каждая страница - указывает на начальную тему, по этому умножается на 10.
Ширина блока - 100 пикселей. Если будет больше - вы сможете попасть на несуществующие страницы, что не очень хорошо