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    13007 +1

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

  1. Денис 23 февраля 2016, 18:01 # 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. Влад 13 сентября 2016, 10:37 # 0
      Можно присвоить ul допустим класс btnactive и стилизовать его в css (:active)
      1. dotcom 26 сентября 2016, 12:18 # 0
        Люди, есть тут кто живой, кто сможет ответить срочно пожалуйста!!!
        1. Александр Мальцев 26 сентября 2016, 12:31 # 0
          Какой вопрос?
          1. dotcom 26 сентября 2016, 14:19 # 0
            Добрый день, у меня в пагинации 2100 страниц, если я захочу добавить страницу, под номером 1, мне нужно будет добавлять к каждой из этих 2100 страниц +1Т.е при дабавлении новой страницы, все последующие сдвигались на один, как это сделать кодом, может знаете какой есть ?! Обыскался нигде нету. Спасибо!
            1. Александр Мальцев 27 сентября 2016, 00:23 # 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 27 сентября 2016, 13:08 # 0
                Спасибо большое, но есть небольшой нюанс, забыл сказать, что у меня нет БД все в папках, ее создавать не имеет смысла. Чтобы вам было понятней у меня фильмы, и размещены они все в «table>tr>td>» на каждой странице. Php код должен быть как-бы для html получается. Есть какие-нибудь варианты ?!
                1. Александр Мальцев 28 сентября 2016, 11:49 # 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 28 сентября 2016, 19:01 # 0
                    Понял. Буду пробовать. А можно не указывать кол-во ресурсов. я их сам размечу в таблице. не могли бы вы еще оставить ссылку на соц.сеть чтобы если что вам отписать!
                    1. dotcom 28 сентября 2016, 22:06 # 0
                      Ну вот у меня получилось так, не могу понять как эти ссылки в <li засунуть, или присвоить ссылку Единичке, она я так понимаю добавилась
                      кодом этим. Как добавит 2 3 4 5 6 и присвоить им эти ссылки?
                      Пагинация с помощью JavaScript
                      1. Александр Мальцев 29 сентября 2016, 12:56 # 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 08 октября 2016, 12:22 # 0
                          спасибо. А если я захочу добавить ссылки, на свои страницы, к примеру, у меня папки за 2016 год 5 месяц 2 число, я добавляю к
                          href уже не саму ссылку на сайт какой-то а /2016-05-02/файл за это число.html и получается я привязал к кнопке 2, файл с этой информацией. Следовательно для этого в коде ничего менять не надо?!
                          1. Александр Мальцев 10 октября 2016, 13:54 # 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. Магжан 30 ноября 2016, 06:13 # 0
                              Добрый день. Помогите пожалуйста с одной маленькой проблемкой
                              1. Магжан 30 ноября 2016, 06:21 # 0
                                Нужно с помощью bootstrap pagination вывести цитаты, которые у меня в базе данных, и с помощью массива пробежаться по нему и вывести каждые 10 цитат(у меня в базе их 100) при нажатии на определенную кнопочку (1, 2, 3… 7), при этом в моей пагинации не должно быть более 3 цифр (пагинация должна быть динамичной). Пожалуйста, помогите с этой задачей.
                                1. Александр Мальцев 30 ноября 2016, 13:29 # 0
                                  Немного выше приведён php скрипт как раз предназначенный для этого:
                                  itchief.ru/lessons/bootstrap-3/41-bootstrap-3-pagination#comment-2999
                                  1. Андрей 04 января 2017, 12:09 # 0
                                    Здравствуйте! Сможете помочь в данной ситуации?
                                    i.gyazo.com/27f5fc45da2f4e7f3fd4df0fefa61a40.png
                                    Как сделать так, что бы выводились только 10 страниц а также переход типа > >>
                                    1. Александр Мальцев 05 января 2017, 01:52 # 0
                                      Здравствуйте. php-скрипт для постраничной пагинации (оформление Bootstrap):
                                      <!DOCTYPE html>
                                      <html lang="ru">
                                      <head>
                                        <meta charset="utf-8">
                                        <title>Пагинация</title>
                                        <link rel="stylesheet" href="/путь_до/bootstrap.min.css">
                                      </head>
                                      <body>
                                      
                                      <?php
                                      // какое количество страниц от текущей показывать в пагинации
                                      $range = 4;
                                      // какое количество записей показывать на одной странице
                                      $rowsperpage = 10;
                                      $database_server = 'localhost';
                                      $database_user = 'root';
                                      $database_password = '';
                                      $dbase = 'mytest';
                                      $dbtable = '`имя_таблицы`';
                                      
                                      $conn = mysql_connect($database_server,$database_user,$database_password);
                                      $db = mysql_select_db($dbase,$conn);
                                      
                                      // найти количество строк в таблице 
                                      $sql = "SELECT COUNT(*) FROM $dbtable";
                                      $result = mysql_query($sql, $conn);
                                      $r = mysql_fetch_row($result);
                                      $numrows = $r[0];
                                      
                                      // количество страниц
                                      $totalpages = ceil($numrows / $rowsperpage);
                                      
                                      // получить текущую страницу или установить её по умолчанию
                                      if (isset($_GET['currentpage']) && is_numeric($_GET['currentpage'])) {
                                         // текущая страница из GET
                                         $currentpage = (int) $_GET['currentpage'];
                                      } else {
                                         // текущая страница по умолчанию
                                         $currentpage = 1;
                                      }
                                      
                                      // если номер текущей страницы больше числа страниц...
                                      if ($currentpage > $totalpages) {
                                         // установить текущую страницу равной последней
                                         $currentpage = $totalpages;
                                      }
                                      // если номер страницы меньше чем номер первой страницы...
                                      if ($currentpage < 1) {
                                         // установить текущую страницу равной первой
                                         $currentpage = 1;
                                      } //
                                      
                                      // смещение списка, основанного на значения номера текущей страницы 
                                      $offset = ($currentpage - 1) * $rowsperpage;
                                      
                                      // получить информацию из базы данных
                                      $sql = "SELECT * FROM $dbtable LIMIT $offset, $rowsperpage";
                                      $result = mysql_query($sql, $conn) or trigger_error("SQL", E_USER_ERROR);
                                      
                                      // перебрать результат...
                                      while ($list = mysql_fetch_assoc($result)) {
                                        // сниппет записи
                                        echo $list['имя_поля_из_таблицы'] . "<br />";
                                      }
                                      
                                      echo '<nav aria-label="Page navigation">';
                                      echo '  <ul class="pagination">';
                                      
                                      
                                      
                                      /******  пагинация ******/
                                      // формируем ссылки на первую и предыдущую страницу
                                      if ($currentpage > 1) {
                                         echo " <li><a href='{$_SERVER['PHP_SELF']}?currentpage=1'>Первая</a><li>";
                                         $prevpage = $currentpage - 1;
                                         echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'><<</a> ";
                                      } else {
                                         echo " <li class='disabled'><a href='{$_SERVER['PHP_SELF']}?currentpage=1'>Первая</a><li>";
                                         $prevpage = $currentpage - 1;
                                         echo " <li class='disabled'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'><<</a></li> ";	
                                      }
                                      // цикл, с помощью которого отобразим пагинацию (вокруг текущей страницы)
                                      for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
                                         // если номер страницы верный...
                                         if (($x > 0) && ($x <= $totalpages)) {
                                            // если страница текщая...
                                            if ($x == $currentpage) {
                                               // вывод текущей страницы
                                               echo "  <li class='active'><a href='{$_SERVER['PHP_SELF']}'>$x</a></li>";
                                            // если страница не текущая...
                                            } else {
                                               // вывод не текущей страницы
                                               echo " <li><a href='{$_SERVER['PHP_SELF']}?currentpage=$x'>$x</a></li> ";
                                            }
                                         } 
                                      }
                                      
                                      // формируем ссылки на последнюю и следующую страницу     
                                      if ($currentpage != $totalpages) {
                                         $nextpage = $currentpage + 1;
                                         echo " <li><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage'>>></a><li> ";
                                         echo " <li><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages'>Последняя</a><li> ";
                                      } else {
                                         $nextpage = $currentpage + 1;
                                         echo " <li class='disabled'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage'>>></a><li> ";
                                         echo " <li class='disabled'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages'>Последняя</a><li> ";  	
                                      }
                                      
                                      echo '</ul></nav>';
                                      ?>
                                      
                                        <script src="/путь_до/jquery-1.12.4.min.js"></script>
                                        <script src="/путь_до/bootstrap.min.js"></script>
                                      
                                      </body>
                                      </html>
                                      
                                      1. Андрей 05 января 2017, 06:45 # 0
                                        Спасибо огромное! Попробую внедрить) Только подскажите (сам я не программист) это нужно создать сначала новую PHP страничку Пагинация а потом на главной странице внедрить /****** пагинация ******/?
            2. Магжан 30 ноября 2016, 06:11 # 0
              Здравствуйте! В данный момент кто-то сможет ответить ???

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