Пагинация — как сделать на сайте?

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

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

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

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

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

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

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

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

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

Создание пагинации на сайте
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Pagination для сайта при помощи jQuery: Bootstrap 4</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/darkly/bootstrap.min.css">
<link href="buzina-pagination.min.css" rel="stylesheet" type="text/css">
<link rel='stylesheet prefetch' href='https://www.rudebox.org.ua/demo/lessons/styles/style.css'>
<style>
.container { margin: 150px auto; }
</style>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>

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

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

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

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

Сделать пагинацию на сайте

Функции JQuery

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

  1. Создание списка данных с нумерацией каждого элемента в главном блоке:
  2. Далее нам нужно указать количество записей, которые будут располагаться на странице:
  3. Создание пагинации на сайте
  4. Следующую функцию можно не указывать, по вашему желанию. Она отвечает за то, будут ли отображаться кнопки next и prew:
  5. Создать пагинацию на сайте

Заключение

Готовая пагинация для сайта

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

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

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

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

Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *