Далее пример использования пагинации постраничная. Поисковая оптимизация постраничной навигации. А что же говорят SEOшники

Сайты, как правило, содержат в себе несколько страниц. На них может располагаться как 3-5 страниц, например на landing-page, а может быть и больше, намного больше.

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

Ещё один момент, кроме обычного JavaScript, в примере используется Bootstrap 4. Его компонент bootstrap pagination сочетается с библиотекой JQuery, а именно специальным плагином Buzina Pagination. Он позволяет разбивать всю информацию на несколько страниц с созданием навигации между ними.

Подключение необходимых фреймворков

Чтобы работать с Bootstrap и JQuery, их нужно подключить. Это можно сделать в вашем HTML документе, с помощью тегов . Создаем 3 парных тега ;. В них подключим Ajax.js, bootstrap 4 и сам плагин JQuery.

Чтобы правильно подключить bootstrap нужно также использовать тег , в его атрибуте href мы указываем ссылку на наш фреймоворк. В нем будет указываться ссылка на стили, которые содержит плагин.

Итак, мы подключили всё необходимое для работы. Осталось только подключить плагин для создания пагинации — Buzina Pagination. Для его создания мы также создаем теги и . В атрибутах "href" и "src" вводим одну и ту же ссылку.

Плагины Buzina Pagination и Bootstrap, помимо скриптов, содержат также и необходимые стили. Их мы и подключаем через тег ;. Теперь запомните — даже если вы неплохо разбираетесь в CSS, не рекомендуем вам заходить и менять настройки плагинов. Ради интереса, вы можете открыть их в кодовом редакторе и просмотреть, но не забудьте предварительно сохранить исходную версию кода.

В вашем HTML документе должен располагаться следующий код:


XHTML

Pagination для сайта при помощи jQuery: Bootstrap 4 .container { margin: 150px auto; }

Pagination для сайта при помощи jQuery: Bootstrap 4

Container { margin : 150px auto ; }

Разметка страниц. HTML

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

В нашем примере мы создаем всего 5 страниц. Создайте для каждой из них отдельный блок div. Внутри можете написать какой-нибудь текст, для визуального отображения. Если хотите, можете создать 10, 20 и 30 страниц.

Для работы с ними вам не потребуются классы и идентификаторы. Главное, чтобы все эти страницы располагались внутри основного блока с классом example.


Функции JQuery

Вам нужно подключить несколько функций:


Заключение

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

Можете изменить скрипты по своему желанию, но только если хорошо разбираетесь в JavaScript. Главное не меняйте значения скриптов и стилей плагинов.

Такая пагинация имеет огромное преимущество — удобство использования. Пользователю не нужно будет грузить дополнительные ссылки для перехода между страницами.

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

Теги:

Решил описать такой на первый взгляд простой но очень интересный момент в web программирование как пагинация.
Наверное каждый web программист хоть раз да и сталкивался с пагинацией, и понимает что универсального решения нет! По этому я предлагаю посмотреть те простые решения которые сам использую.

P.s. В топике приведен пример пагинации на php, без использования AXAJ и тд. Это сделано для того что б продемонстрировать саму суть, так сказать сделать каркас.

Поехали!

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

  • Количество всех страниц.
  • Количество отображаемых страниц в пагинации.
  • Текущую страницу
Если честно то данных нам нужно немножко больше, но все это зависит от того какую именно пагинацию мы хотим сделать, так что об остальных данных мы поговорим чуть позже.

Допустим количество всех страниц нам известно и оно 45. Текущую страницу мы будем брать с $_GET"а, а если её там нет, то задавать она будет ровна 1.
А вот с количеством отображаемых страниц все интересней, я решил дать нашему скрипту немного гибкости, так что мы могли сами задать количество ссылок с лева и права от текущей странице, выглядит это примерно так:

/*текущая страница*/

$iCurr = (empty($_GET["page"]) ? 1: intval($_GET["page"]));

/*всего страниц или конечная страница*/

$iLastPage = 45;

/*левый и правый лимиты*/

$iLeftLimit = 4;
$iRightLimit = 5;

/*вызов функции*/
makePager($iCurr, $iLastPage, $iLeftLimit, $iRightLimit) ;

Ну вот все данные у нас уже есть и можно заняться самой функцией пагинации.

Наша функция называеться «makePager», и она ожидает от нас 4 параметра:

  • текущая страница - $iCurr
  • всего страниц или конечная страница - $iLastPage
  • левый лимит - $iLeftLimit
  • правый лимит- $iRightLimit
  • Код:
    function makePager($iCurr, $iEnd, $iLeft, $iRight)
    {
    if($iCurr > $iLeft && $iCurr < ($iEnd-$iRight))
    {
    for($i=$iCurr-$iLeft; $i