Главная » jQuery » SimplePagination.js - Легкий jQuery плагин для создания пагинации

SimplePagination.js — Легкий jQuery плагин для создания пагинации

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

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

SimplePagination.js


 
jQuery плагин для создания пагинации
 
Очень легкий, во всех отношениях, и по весу, и все что касается подключения, настроек, резвый для создания нумерации страниц, укомплектованный тремя стилями оформления, и заряженный на поддержку Bootstrap.

Кстати, если вас не устроят стандартные стили, можете использовать Набор стилей пагинации на CSS3, который не составит большого труда прикрутить в .css плагина.
 
Стили постраничной навигации
 
Теперь, давайте более подробно рассмотрим, как правильно подключить сам плагин и стилевой файл к документу, то-есть непосредственно внедрить его на страницы сайта, и пройдемся по доступным настройкам плагина.

Для начала, конечно же нужно заиметь плагин, то есть Скачать Архив » с исходниками, в который бережно упакованы сам jquery javascript и файл стилей css.

Разберем пошагово, как использовать плагин:
 

Шаг 1. Подключение jQuery

В теле страницы в раздел <head>...</head> необходимо подключить фрэймворк jQuery, желательно версии 1.7.2, или более свежей, сделать это можно используя специальное хранилище Google:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Или воспользоваться библиотекой JQuery из архива, предварительно поместив ее в папку с javascript у вас на сайте:

<script type="text/javascript" src="папка с js/jquery.min.js"></script>

Если у вас на сайте jQuery уже включен и вовсю работает, все телодвижения описанные выше, можете смело пропустить, главное следите за тем, что бы версия jQuery, не была слишком дремучей. В WordPress, кстати, с этим все в порядке.
Далее, подключаем нашу рабочую лошадку — плагин jquery.simplePagination.js:

<script type="text/javascript" src="папка с js/jquery.simplePagination.js"></script>

 

Шаг 2. Подключение CSS

Чтобы панель пагинации выглядела подобающе, в соответствии с общим дизайном, включаем в работу файл simplePagination.css из архива, с тремя вариациями оформления нумерации страниц:

<link type="text/css" rel="stylesheet" href="css/simplePagination.css"/>

Можно не городить огород, а просто выбрать нужный вам стиль, светлый, темный или компактный и вставить набор правил в файл стилей .css вашего шаблона. Прописать свои собственные стили или воспользоваться Bootstrap, тоже вариант, в плане оригинальности и развития навыков сайтостроения, даже более предпочтительный.
 

Шаг 3. HTML

Чтобы вывести панель постраничной навигации на страницах сайта, там где вы планируете её разместить, логичнее и чаще всего, это внизу основного содержания, следует прописать следующее:
Для светлого фона:

<div id="light-pagination" class="pagination"></div>

Для пагинации на темном фоне:

<div id="dark-pagination" class="pagination"></div>

Компактная тема:

<div id="compact-pagination" class="pagination"></div>

 

Шаг 4.Инициализация плагина

После готовности документа, все что нам остается сделать, это запустить плагин:

$(function() {
    $(#light-pagination).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

В примере я использовал инициализацию для пагинации светлой темы #light-pagination, вы же можете изменить селектор на другой, для компактного это #compact-pagination, или для темного стиля #dark-pagination. Не забывайте в таком случае менять и класс в функции cssStyle.
Кая я уже писал выше, плагин очень гибкий в настройках, для изменения доступны следующие опции:

  • items — Общее количество элементов, которые будут использоваться для расчета страниц. По умолчанию: 1.
  • itemsOnPage — Количество элементов, отображаемых на каждой странице. По умолчанию: 1.
  • pages — Опционально. Если указано значение, опции items и itemsOnPage игнорируются. Устанавливает количество страниц в списке.
  • displayedPages — Сколько номеров страниц должно быть видно во время навигации. Минимально допустимое значение: 3, по умолчанию: 5.
  • edges — Сколько номеров страниц видно в начале и в конце нумерации. По умолчанию значение: 2.
  • currentPage — Какая страница будет выбран сразу после запуска. Логично, по умолчанию значение: 1.
  • hrefTextPrefix — Строка, используемая в атрибуте HREF, добавляется перед номером страницы. По умолчанию: "#page- ".
  • hrefTextSuffix — Строка, используемая в атрибуте HREF, вставляется после номера страницы. По умолчанию пустая строка.
  • prevText — Текст кнопки на предыдущую страницу. По умолчанию: «Prev».
  • nextText — Текст кнопки на следующую страницы. По умолчанию: «Next»
  • cssStyle — Определят стиль CSS. По умолчанию: «light-theme»
  • selectOnClick — Выбор страницы после нажатия, по умолчанию — включен(true), зачем отключать так и не понял, но такая возможность есть, значение: «false».

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

Мне остается только, пожелать вам удачи и успехов в работе над вашими новыми проектами.

*driver*

Источник: flavius matis

Буду признателен, если поделитесь ссылкой на эту запись в своих соц.сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

22 комментария
  1. Антон says:

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

    Подскажите пожалуйста.

    Ответить
    • driver says:

      День добрый.

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

      Но зачем огород городить, когда существуют готовые решения.

      Ответить
      • Vit says:

        А зачем этот плагин тогда, если они не умеет резать контент на страницы?

        Ответить
        • Евгений says:

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

  2. Антон says:

    Не подскажите, а то замучился хороший вариант искать

    Ответить
  3. Бимба says:

    как привязать ссылки к кнопке ?

    Ответить
  4. Max says:

    Плагин хороший, для навигации по страничкам HTML сайта вполне удобен. Вот только заковыка с currentPage. Предположим поставлю я по умолчанию 1 страницу активной, а посетитель зашел на 128, хотелось бы отображать в currentPage именно ту страницу на которой сейчас находится посетитель. Это можно как то сделать?

    Ответить
    • driver says:

      Используйте getCurrentPage — возвращает(отображает) номер текущей страницы.

      Ответить
      • Al says:

        Никак не могу разобраться с этим getCurrentPage. Может подскажите чуть подробнее, как сделать чтобы отмечался отображаемый номер страницы? Прописывать на каждой странице currentPage — не вариант 🙂

        Ответить
  5. Роман says:

    Я не понимаю как вы его вообще запустили

    Всё сделал строго по шагам но никакой пагинации не выдало — просто пустая страница

    Вот код

    Где ошибка не понимаю

    Сразу говорю — все файлы лежат именно там куда ссылаются строки link и script

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/simplePagination.css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.simplePagination.js"></script> </head> <body> <script> $(function() { $(#light-pagination).pagination({ items: 100, itemsOnPage: 10, cssStyle: 'light-theme' }); }); </script> <div id="light-pagination" class="pagination"></div> </body> </html>

    Ответить
    • driver says:

      Вот специально для вас в онлайн-редакторе запустил: Тынц

      И пожалуйста, дорогой вы мой человечище, не нуна в комментариях вбухивать код всей страницы)))

      не понятно а собственно ЧТО мы пагинируем?

      Страницы, стра-а-ницы, которые нужно иметь и желательно больше одной)))

      Ответить
  6. Роман says:

    Опять же не понятно а собственно ЧТО мы пагинируем?

    Куда вставлять текст например который мы хотим разбить?

    Ответить
  7. Роман says:

    Спрошу по-другому

    КУДА в этом коде вписывать эти страницы?

    Ответить
  8. Роман says:

    и ещё бы не плохо понять в каком виде их вписывать?

    через ? <a href=""> ? или как?

    Ответить
    • driver says:

      Наведите на любую из кнопок, префикс страниц #page- задан в параметре плагина hrefTextPrefix по умолчанию. Дальше, у вас есть страницы 1,2,3, и т.д ничего прописывать специально не надо, весь массив берётся из базы данных(если сайт у вас не статичный). Еже ли ваш сайт рукописный(без движка) по идее вычисления начинаются с 1 и далее страниц, главное чтобы они находились в одной директории. Как поведёт себя плагин на рабочем сайте, специально не проверял, уж извините. Статья, это всего лишь представление ещё одного неплохого инструмента, в большей мере для тех, кто имеет представление, как этим инструментом пользоваться.

      PS: Если у вас страницы вида 2.html, 3.html и т.д., используйте hrefTextSuffix: '.html', и всё у вас получится))

      Ответить
      • алина says:

        Если названиq у страниц не сосстоят из номера 1.html, 2html, а из слов, как тогда прописывать?

        Ответить
  9. Роман says:

    сделал hrefTextSuffix: '.php',

    положил в ту же директорию где лежит сам пагинатор 3 файла 1.php, 2.php, 3.php

    результат нулевой

    информация из них на экран не выводится

    никаких баз данных у меня нет в принципе

    мне нужно текст из файлов 1.php, 2.php, 3.php раскидать по страницам — только и всего

    или лучше вообще огромный текст из 1 файла разбить по страницам основываясь на количестве строк — вот такой скрипт я нигде вообще не могу найти

    Ответить
  10. Роман says:

    Пробовал назвать файлы page-1.php, page-2.php, page-3.php

    Тот же результат — нулевой

    Ответить
  11. Роман says:

    Нашёл шикарный простой как валенок пагинатор — построчный

    обрабатывает строки считывая TR TD тэги из таблицы

    Да конечно не получится например таким пагинатором разбить например книгу (хотя если заморочиться с расстановкой то можно)

    Ответить
    • driver says:

      Роман, рад за вас, что нашли то что искали)))

      Скрипт, описанный в статье тоже замечательно работает, специально сделал на локалке

      Например, есть страницы такого типа 1.html, 2.html и т.д. Тогда заводим пагинатор с такими параметрами:

      <script type='text/javascript'> 
      $(window).load(function(){
      $('#light-pagination').pagination({
      	pages: 20,
          hrefTextPrefix: '',
          hrefTextSuffix: '.html',
          prevText: 'Начало',
          nextText: 'Конец',
          cssStyle: 'light-theme'
      });
      
      }); 
      </script>

      Переключение на ура, что касаемо статичных страниц, соответственно div пагинатора, необходимо прописывать на каждой странице. На php, с обработкой массивов, всё таки немного другой подход, существуют готовые php-скрипты.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru