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 дочерних блоков.

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

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