Text Pagination - jQuery Auto Pagination или автоматическая пагинация текста. Умные страницы: Постраничная навигация (Pagination) средствами jQuery Как сделать пагинацию на ajax урок

Посмотрите на иллюстрацию ниже, чтобы лучше понять идею.

Шаг 1 - XHTML

Первый шаг - это создание разметки XHTML. Плагину нужно предоставить неупорядоченный список

с некоторым количеством элементов
• внутри него. Ниже представлен код из файла demo.html, который вы найдете в архиве с примером:
  • Lorem ipsum dolor sit amet...
  • Lorem ipsum dolor sit amet...
  • Lorem ipsum dolor sit amet...
  • Lorem ipsum dolor sit amet...

  Блок main выступает в роли контейнера для разбитого на страницы элемента

  , и к нему применен светло-серый фон. Неупорядоченный список содержит в себе элементы.

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

  • любой контент, так как размеры автоматически высчитываются jQuery (если вы хотите использовать картинки - помните о том, что нужно указать их ширину и высоту).

    Шаг 2 – CSS

    После создания разметки займемся приданием ей стилевого оформления. Хорошая идея - использовать стили так, словно у вас и нет этой постраничной навигации, так как плагин зависит от JavaScript. Это означает, что есть вероятность того, что некоторые пользователи не смогут увидеть вашу постраничную навигацию и, соответственно, воспользоваться ею.

    styles.css – Часть 1

    #main{ /* The main container div */ position:relative; margin:50px auto; width:410px; background:url("img/main_bg.jpg") repeat-x #aeadad; border:1px solid #CCCCCC; padding:70px 25px 60px; /* CSS3 rounded cornenrs */ -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; } #holder{ /* The unordered list that is to be split into pages */ width:400px; overflow:hidden; position:relative; background:url("img/dark_bg.jpg") repeat #4e5355; padding-bottom:10px; /* CSS3 inner shadow (the webkit one is commeted, because Google Chrome does not like rounded corners combined with inset shadows): */ -moz-box-shadow:0 0 10px #222 inset; /*-webkit-box-shadow:0 0 10px #222 inset;*/ box-shadow:0 0 10px #222 inset; } .swControls{ position:absolute; margin-top:10px; }

    Перво-наперво придаем стиль блоку main и неупорядоченному списку (последнему присвоен id = holder ).

    Заметьте, что мы используем эффект тени в CSS3 с атрибутом inset для имитации внутренней тени. Как и в случае с большинством правил CSS3, нам все еще необходимо указывать правила отдельно для определенных браузеров: с движком Mozilla (Firefox) и Webkit (Safri и Chrome).

    Вы могли обратить внимание, что версия для webkit закомментирована. Это связано с багом при отрисовке теней в Chrome при одновременном использовании данного свойства всесте со свойством border-radius (тени создаются так, как если бы блок имел прямые углы, игнорируя их скругления и, следовательно, портя эффект).

    styles.css – Часть 2

    A.swShowPage{ /* The links that initiate the page slide */ background-color:#444444; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; /*border:1px solid #ccc;*/ /* CSS3 rounded corners */ -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; } a.swShowPage:hover, a.swShowPage.active{ background-color:#2993dd; /* CSS3 inner shadow */ -moz-box-shadow:0 0 7px #1e435d inset; /*-webkit-box-shadow:0 0 7px #1e435d inset;*/ box-shadow:0 0 7px #1e435d inset; } #holder li{ background-color:#F4F4F4; list-style:none outside none; margin:10px 10px 0; padding:20px; float:left; /* Regular CSS3 box shadows (not inset): */ -moz-box-shadow:0 0 6px #111111; -webkit-box-shadow:0 0 6px #111111; box-shadow:0 0 6px #111111; } #holder, #holder li{ /* Applying rouded corners to both the holder and the holder lis */ -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } .clear{ /* This class clears the floated elements */ clear:both; }

    Завершает код класс clear , используемый для сброса обтекания элементов.

    
    

    Шаг 3 – jQuery

    В завершающей части урока нам нужно включить на страницу последнюю версию библиотеки jQuery. C точки зрения производительности мудро включать все внешние яваскрипты непосредственно перед закрывающим тэгом body, так как скрипты блокируют рендеринг (отрисовку) страницы.

    script.js – Часть 1

    (function($){ // Creating the sweetPages jQuery plugin: $.fn.sweetPages = function(opts){ // If no options were passed, create an empty opts object if(!opts) opts = {}; var resultsPerPage = opts.perPage || 3; // The plugin works best for unordered lists, // although OLs would do just as well: var ul = this; var li = ul.find("li"); li.each(function(){ // Calculating the height of each li element, // and storing it with the data method: var el = $(this); el.data("height",el.outerHeight(true)); }); // Calculating the total number of pages: var pagesNumber = Math.ceil(li.length/resultsPerPage); // If the pages are less than two, do nothing: if(pagesNumbermaxHeight) maxHeight = tmpHeight; totalWidth+=elem.outerWidth(); elem.css("float","left").width(ul.width()); }); swPage.wrapAll(""); // Setting the height of the ul to the height of the tallest page: ul.height(maxHeight); var swSlider = ul.find(".swSlider"); swSlider.append("").width(totalWidth); var hyperLinks = ul.find("a.swShowPage"); hyperLinks.click(function(e){ // If one of the control links is clicked, slide the swSlider div // (which contains all the pages) and mark it as active: $(this).addClass("active").siblings().removeClass("active"); swSlider.stop().animate({"margin-left": -(parseInt($(this).text())-1)*ul.width()},"slow"); e.preventDefault(); }); // Mark the first link as active the first time the code runs: hyperLinks.eq(0).addClass("active"); // Center the control div: swControls.css({ "left":"50%", "margin-left":-swControls.width()/2 }); return this; }})(jQuery);

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

    .

    Мы также заключаем страницы в блок swSlider , который достаточно широк для того, чтобы отобразить их "бок о бок". Далее мы отслеживаем событие клика по навигационным ссылкам и перемещаем блок swSlider методом animate . Это создает эффект скольжения (слайдинга), который вы видите в демо.

    script.js – Часть 3

    $(document).ready(function(){ /* The following code is executed once the DOM is loaded */ // Calling the jQuery plugin and splitting the // #holder UL into pages of 3 LIs each: $("#holder").sweetPages({perPage:3}); // The default behaviour of the plugin is to insert the // page links in the ul, but we need them in the main container: var controls = $(".swControls").detach(); controls.appendTo("#main"); });

    В последней части кода мы просто вызываем плагин и передаем настройку perPage (сколько элементов на страницу отображать). Также обратите внимание на использование метода detach , введенного в jQuery 1.4. Он удаляет элементы из DOM (Объектной Модели Документа), но оставляет нетронутыми все "прослушиватели" событий. Это позволяет нам вынести управляющие ссылки за пределы элемента

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

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

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

    

    Это отличный jQuery-плагин от Remy Elazare, который сочетает в себе нумерацию страниц и прокрутку, в простом пользовательском интерфейсе.

    jPaginate

    

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

    Pajinate

    

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

    

    Простой плагин jQuery для создания нумерации страниц с тремя CSS-темами.

    jPList

    

    jPList представляет собой гибкий jQuery-плагин для сортировки, нумерации страниц и фильтрации любой HTML-разметки (DIV, UL/LI, таблицы и т.д.) - премиум плагин от CodeCanyon .

    

    Этот плагин создает простую сортировку контента и позволяет вам управлять вашим контентом при помощи нумерации страниц! Simple Content Sorting обеспечивает простой способ украсить ваш интерфейс, предоставляя удобный механизм сортировки. - Премиум плагин он CodeCanyon

    Easy Paginate

    

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

    SimplePager

    

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

    

    JQuery-плагин, который предоставляет новый метод разбиения на страницы для вашего веб-сайта или приложения. Вместо того, чтобы выводить список номеров страниц, как в традиционных методах, jqPagination использует интерактивный вывод нумерации страниц, например "1 из 5 Страниц", при выборе плагин позволяет пользователю ввести нужный номер страницы. Сссылки "первая страница", "предыдущая", "следующая" и "последняя" установлены по умолчанию, но их можно отключить.

    

    Если у вас есть большой список элементов (например, результаты поиска или новости, статьи), вы можете их сгруппировать по отдельным страницам и добавить элементы навигации при помощи этого плагина.

    

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

    

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

    Smart Paginator

    

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

    

    Как можно догадаться из названия, использует Ajax для создания постраничной навигации на вашем сайте. Он будет загружать только определенную часть, а не всю страницу, таким образом ускоряется время загрузки сайта.

    Sweet Pages

    

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

    
    

    Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

    • You can use touch and mouse swipe navigation
    • You can use different types of the pages change
    • State of active page is saved in the History API
    • You can use different sets of controls: numbers, arrows, point, progress bar, and a field for entering the desired page
    • You can use one of the ready-made themes
    • You can improve the appearance of not only text, but also images or lists
    • Using a large number of different parameters and methods, you can create a candy instead of boring text
    SETS OF CONTROL ELEMENTS

    Classic of Pagination consists of a set of buttons, such as "Home", "Previous", "Next", "Last page" button, and of course - the page numbers. Also consists a block of page status. Each item is a separate and independent element, which can be displayed anywhere on the page or not display at all.

    To quickly jump to the desired page - enter the page number in the box and click "OK".

    This set is perfect navigation suitable for a small number of pages, when enough simply turn the pages back and forth

    This is the most minimalist view of the controls, similar to the one that you used to see in the sliders.

    This control is useful if you need to have quick access to all pages. This type of control is suitable for large text, and for small posts

    This kind of control is minimized due to the absence of buttons with page numbers.

    This is a stylish and modern look of management of pages. It takes up very little space, but it is very functional.

    This is not a standard type of pagination. With it is possible to estimate the percentage of readed pages.

    Control elements not necessary to register in the plugin. You can manually add any control to any location of code, but it is necessary to specify unique name of the pagination block in the data-href attribute, and transition identifier. As a control button, you can use any html element: a, button, span, div, img and other.

    This set of controls combines the classic look and a block for bystoro transition to the specific page.

    TYPE OF CONTENTS

    If you are using a plug-in to block that contains only text nodes, the text will be divided into parts by a dots if they are in the text. If the text is not points, for the separation of the text you need to specify the character in the parameter "splitSymbols", such as space, letter, or other

    If you are using a plug-in to block that contains paragraphs tags or other html tags with text, the text will be divided into parts by this html tags.

    Plugin equally well splits on the page as tags for formatting text and image tags. Keep an eye on the behavior of the image height using CSS styles

    list is splitted as other tags. The most important thing is that the list of elements is a child of the initialization element

    MORE DEMOS

    On one page may be several blocks with page navigation. And each of this blocks can have your settings

    This parameter specifies the number of the page to be displayed after the first download site

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

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

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

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

    Теперь, давайте более подробно рассмотрим, как правильно подключить сам плагин и стилевой файл к документу, то-есть непосредственно внедрить его на страницы сайта, и пройдемся по доступным настройкам плагина.

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

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

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

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

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

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

    Шаг 3. HTML

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

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

    $(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».

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

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