Bootstrap 3 - Пагинация (pagination)

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

Создание страничной навигации с помощью Twitter Bootstrap

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

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Например: блок страничной навигации, состоящий из 5 страниц.

Навигационный блок с активными и неактивными состояниями элементов

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

<ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Например: блок страничной навигации с активным и неактивным состоянием элементов.

Примечание: Класс .disabled изменяет только внешний вид ссылки, но не отменяет её функциональность. Для отмены функциональности необходимо заменить тег ссылки <a> на логический тег <span>.

<ul class="pagination">
  <li class="disabled"><span>«</span></li>
  <li class="active"><span>1</span></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Выше приведенный код будет выглядеть примерно так:

Изменение размеров блока страничной навигации

С помощью классов .pagination-lg и .pagination-sm вы можете увеличить или уменьшить размеры блока страничной навигации.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Например: большой, стандартный и маленький размеры блока страничной навигации.

Компонент "Пейджер" (Pager)

Компонент "Пейджер" представляет собой ссылки для перехода на предыдущую и следующую страницу вашего сайта. Для его создания необходимо использовать класс .pager.

<ul class="pager">
  <li><a href="#">Предыдущая</a></li>
  <li><a href="#">Следующая</a></li>
</ul>

Например: компонент "Пейджер", состоящий из 2 ссылок на предыдущую и следующую страницу.

Выравнивание "Пейджера"

По умолчанию, ссылки на страницы компонента "Пейджер" выравниваются в горизонтальном направлении по центру. Но, Twitter Bootstrap с помощью класса .previous позволяет выравнять ссылку на предыдущую страницу по левому краю, а с помощью класса .next ссылку на следующую страницу по правому краю.

<ul class="pager">
  <li class="previous"><a href="#">← Предыдущая</a></li>
  <li class="next"><a href="#">Следующая →</a></li>
</ul>

Например: компонент "Пейджер" с выравниванием ссылок.

Компонент "Пейджер" может использовать классы блока страничной навигации .disabled и .active

<ul class="pager">
  <li class="previous disabled"><a href="#">← Предыдущая</a></li>
  <li class="next"><a href="#">Следующая →</a></li>
</ul>

Например: компонент "Пейджер" с неактивной ссылкой на предыдущую страницу.



   Bootstrap 0    10189 0

Комментарии (17)

  1. Денис # 0
    Добрый день.

    А как сделать чтобы при переходе на вторую страницу была активная кнопка 2, потом 3 и т.д
    Я так понял это скрипт js нужен можете написать какой код нужен для
    <ul class="pagination">
      <li><a href="#">«</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">»</a></li>
    </ul>
    Спасибо
    1. Влад # 0
      Можно присвоить ul допустим класс btnactive и стилизовать его в css (:active)
      1. dotcom # 0
        Люди, есть тут кто живой, кто сможет ответить срочно пожалуйста!!!
        1. Александр Мальцев # 0
          Какой вопрос?
          1. dotcom # 0
            Добрый день, у меня в пагинации 2100 страниц, если я захочу добавить страницу, под номером 1, мне нужно будет добавлять к каждой из этих 2100 страниц +1Т.е при дабавлении новой страницы, все последующие сдвигались на один, как это сделать кодом, может знаете какой есть ?! Обыскался нигде нету. Спасибо!
            1. Александр Мальцев # 0
              Пагинация на php осуществляется так:
              <?php
                // количество ресурсов на странице
                $num_recourse_per_page=10;
                // подключаемся к базе данных
                mysql_connect('localhost','root','');
                // выбираем базу данных
                mysql_select_db('resources');
                // если существует GET-параметр page
                if (isset($_GET["page"])) {
                  // то получить его и присвоить значение переменной
                  $page  = $_GET["page"];
                } else {
                  // иначе переменной page присвоить значение 1
                  $page=1;
                }; 
                // начиная с какой строки необходимо возвращать данные
                $start = ($page-1) * $num_recourse_per_page;
                // sql-запрос (LIMIT опредяляет какой диапазон необходимо выбрать)
                $sql = "SELECT * FROM имя_таблицы LIMIT $start, $num_rec_per_page"; 
                // выполнить запрос
                $result = mysql_query ($sql);
              ?>
              
              Т.е. с помощью выражения LIMIT в запросе. Первое значение указывает число с которого необходимо начать выбирать, а второе то сколько записей необходимо выбрать:
              ... LIMIT 10, 10 (выберет из таблицы записи с 11 по 20)
              
              Потом необходимо указать место где эти записи вывести:
              <?php 
              while ($row = mysql_fetch_assoc($result)) { 
                echo $row['имя_поля1'];
                echo $row['имя_поля2'];  
              }
              ?> 
              
              1. dotcom # 0
                Спасибо большое, но есть небольшой нюанс, забыл сказать, что у меня нет БД все в папках, ее создавать не имеет смысла. Чтобы вам было понятней у меня фильмы, и размещены они все в «table>tr>td>» на каждой странице. Php код должен быть как-бы для html получается. Есть какие-нибудь варианты ?!
                1. Александр Мальцев # 0
                  Ну тогда используйте JavaScript. В этом случае пагинацию по файлам можно сделать так.
                  1. Скачать jQuery плагин pagination с гитхаба (_https://github.com/superRaytin/paginationjs)
                  2. Подключить css-файл pagination к странице:
                  <link href="css/pagination.css" rel="stylesheet">
                  
                  3. Подключить js-файл к странице:
                  <script src="js/pagination.js"></script>
                  
                  4. Вставить в необходимое место страницы HTML-код:
                  <div id="pagination">
                    <div id="data-container"></div>
                    <div id="pagination-container"></div>
                  </div>
                  
                  5. Добавить после подключения js-файлов следующий скрипт:
                  <script>
                  // список ресурсов
                  var resources = [
                    {href :'https://www.yandex.ru/'}, 
                    {href :'https://music.yandex.ru/'}, 
                    {href :'http://www.ivi.ru/'}, 
                    {href :'https://ege.yandex.ru/'}, 
                    {href :'https://market.yandex.ru/'},
                    {href :'http://getbootstrap.com/'},
                    {href :'http://v4-alpha.getbootstrap.com/'}
                  ];
                  // pageSize - количество ресурсов в одном блоке
                  $(function(){
                    $('#pagination-container').pagination({
                      dataSource: resources,
                      pageSize: 3,
                      formatResult: function(data) {
                        for (var i = 0, len = data.length; i < len; i++) {
                          data[i].href = data[i].href;
                        }
                      },
                      callback: function(data, pagination) {
                        var dataContainer = $('#data-container');
                        var html = '<ul>';
                        $.each(data, function(index, item) {
                          html += '<li><a href="'+ item.href +'">'+item.href+'</a></li>';
                        });
                        html += '</ul>';
                        dataContainer.html(html);
                      }
                    })
                  });
                  </script>
                  
                  Пагинация на JavaScript
                  Ваша задача — это наполнить массив resources необходимыми адресами.
                  1. dotcom # 0
                    Понял. Буду пробовать. А можно не указывать кол-во ресурсов. я их сам размечу в таблице. не могли бы вы еще оставить ссылку на соц.сеть чтобы если что вам отписать!
                    1. dotcom # 0
                      Ну вот у меня получилось так, не могу понять как эти ссылки в <li засунуть, или присвоить ссылку Единичке, она я так понимаю добавилась
                      кодом этим. Как добавит 2 3 4 5 6 и присвоить им эти ссылки?
                      Пагинация с помощью JavaScript
                      1. Александр Мальцев # 0
                        Можно вместо ul использовать ol.
                        Можно в переменной добавить дополнительные свойства:
                        // список ресурсов
                        var resources = [
                          {id:1, href :'https://www.yandex.ru/', title: 'Яндекс'},
                          {id:2, href :'https://music.yandex.ru/', title:'Яндекс Музыка'}, 
                          ...
                        ];
                        
                        А потом изменить следующую строчку (т.е. как выводить):
                        html += '<li>'+item.id+'. <a href="'+ item.href +'">'+item.title+'</a></li>';
                        
                        На выходе будет:
                        <li>id(его значение)<a href="href(его значение)">title(его название)</a></li>
                        
                        Т.е. как угодно…
                        Ссылки на социальные сети есть в футере.
                        1. dotcom # 0
                          спасибо. А если я захочу добавить ссылки, на свои страницы, к примеру, у меня папки за 2016 год 5 месяц 2 число, я добавляю к
                          href уже не саму ссылку на сайт какой-то а /2016-05-02/файл за это число.html и получается я привязал к кнопке 2, файл с этой информацией. Следовательно для этого в коде ничего менять не надо?!
                          1. Александр Мальцев # 0
                            Не знаю что Вы хотите.
                            Можно сделать очень просто. Содержимое блока div с id=«page-1» одна страница, div с id=«page-2» вторая и т.д.
                            <div id="page-navigator">
                              <div id="page-1" class="active">p1</div>
                              <div id="page-2">p2</div>
                              <div id="page-3">p3</div>
                              <div id="page-4">p4</div>
                              <div id="page-5">p5</div>
                              <div id="page-6">p6</div>
                            </div>
                            <nav>
                              <ul id="pagination" class="pagination">
                                <li class="active"><a href="#" rel="page-1">1</a></li>
                                <li><a href="#" rel="page-2">2</a></li>
                                <li><a href="#" rel="page-3">3</a></li>
                                <li><a href="#" rel="page-4">4</a></li>
                                <li><a href="#" rel="page-5">5</a></li>
                                <li><a href="#" rel="page-6">6</a></li>
                              </ul>
                            </nav>
                            
                            <script>
                                $('#pagination a').click(function() {
                                    $('#pagination li.active').removeClass('active');
                                    $('#page-navigator>div.active').removeClass('active');
                            
                                    $(this).parent('li').addClass('active');
                                    $('#' + $(this).attr('rel')).addClass('active');
                            
                                    return false;
                                });
                            </script>
                            
                            1. Магжан # 0
                              Добрый день. Помогите пожалуйста с одной маленькой проблемкой
                              1. Магжан # 0
                                Нужно с помощью bootstrap pagination вывести цитаты, которые у меня в базе данных, и с помощью массива пробежаться по нему и вывести каждые 10 цитат(у меня в базе их 100) при нажатии на определенную кнопочку (1, 2, 3… 7), при этом в моей пагинации не должно быть более 3 цифр (пагинация должна быть динамичной). Пожалуйста, помогите с этой задачей.
                                1. Александр Мальцев # 0
                                  Немного выше приведён php скрипт как раз предназначенный для этого:
                                  itchief.ru/lessons/bootstrap-3/41-bootstrap-3-pagination#comment-2999
            2. Магжан # 0
              Здравствуйте! В данный момент кто-то сможет ответить ???

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