jPaginate - плагин для постраничной навигации на jQuery

Опубликовано admin - вт, 09/06/2011 - 22:35

Постраничная навигация может быть не только на php, но и на jQuery. Для этого был разработн jQuery плагин jPaginate. Палгин поддерживается большинстовм браузеров.

  • Google Chrome 9+
  • Opera 10.5+
  • Firefox 4+
  • Safari 3.2+
  • Internet Explorer 6 +

Плагин хорошо сделан, но вряд ли кому-то захочется указывать его настройки вручную, постоянно изменять настройки, если например постраничных данных стало больше или меньше. В статье я расскажу как совместить плагин jPaginate с php и Mysql и седлать на основе ajax постраничную навигацию.


 

HTML структура

Для создания постраничной навигации требуется контейнер (div) с id, внутри которого будет находится список li элементов с расположенными внутри элементами ссылками. Который указан в следующем листинге.

Постраничная навигация создаётся следующим методом, где используются следующие параметры "count" - количество страниц, в нашем случае - 100, start - начальная позиция у нас она - 1 и display - количество отображаемых страниц (в нашем случае 8), остальные будут размещены за пределами видимости. Дополнительные настройки касаются только стилевого оформления.

 

jPaginate поддерживает возможность создания внутренних обработчиков для определенных событий, например на событие change. Как пример, его можно использовать для подгруздки данных через ajax методы jQuery

Для правильной работы предыдущего примера, DIV элементы должны состоять из следующей HTML структуры.

Чтобы статьи подгружались через ajax можно использовать следующий код.

Результат с реагированием на событие onchange. Нажмите одну из страниц и Вы получите список статей через ajax.

src="/scriptsforpost/918/jpaginate/iframe.php"

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

Заранее Вас разочарую, в примере я вывел 11 старинц по 2 статьи, хотя в листингах указал $pages_count = ceil($count / 5);(выводить по 5 статей), - сделал я это намеренно, чтобы эффект прокрутки постарничной навигации присутсвовал. В архиве я сохранил это значение равным 5, то есть, если Вам нужно его увеличить или уменьшить, для этого измените данное занчение, как и где указнно в следующем листинге.

А сейчас я Вас запутаю ещё сильнее, так как Вы будете подстраивать скрипт под собственные данные, следовательно и количество ссылок пстраничной навигации будет разным, то есть Вы нажмёте 15 но у Вас ничего не загрузится, поскольку такого контейнера нет, поэтому укажите этот контейнер. В нашем случае 12 ссылок, поэтому контейнер с id "pagedemo _current" должен содержать 12 дочерних блоков.

На разработку сайта! Скидки до 20%!