Найти

Категории

Генератор форм

Конструктор форм

Для веб-мастера

  • AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
  • CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
  • GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
  • Etxt.RU - биржа статей.
  • FastVPS - качественный VPS/VDS хостинг в германии.
  • Roistat - система сквозной бизнес-аналитики.

Реклама

Главная › ❶ Веб-программирование

Создание навигации по страницам на своем сайте (Pagination)

Рейтинг:
Дата: 22 апреля 2011 Просмотры 41860 Комментарии 10

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

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

Выглядеть наша навигация будет так:

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

Итак, приступим. Для начала давайте разберемся, как это работает и немного вспомним теорию.

Для того чтобы организовать навигацию по страницам, необходимо из общей базы контента выводить определенное количество материалов на одной странице. Для этого в mysql существует оператор LIMIT, который имеет 2 параметра:

  • позиция с которой начать выборку из базы
  • количество возвращаемых строк

Именно этим оператором мы и воспользуемся для организации пагинации. Все что нам надо, это передавать в $_GET параметре номер записи с которой начать выборку.

Давайте посмотрим пример SQL-запроса

SELECT * FROM table LIMIT 0,10

Данный запрос вернет 10 строк, начиная с нулевой.

От теории к практике

Для работы нашей функции необходимо создать 2 переменные:

  • $per_page - Максимальное число сообщений на одной странице
  • $num_page - Число ссылок в навигации от активной ссылки
$per_page = 10;
$num_page = 2;

Далее договоримся, что номер записи будет передаваться через - $_GET['p'].

Ссылка в адресной строке будет выглядеть так:

http://example.com/categories.php?p=10

Тогда номер строки с которой начать выборку можно получить так:

$start_row = (!empty($_GET['p']))? intval($_GET['p']): 0;

Теперь необходимо получть общее число строк в базе данных. Для этого выполним следущий запрос:

mysql_query('SELECT COUNT(*) AS numrows FROM table');

где,table — это название таблицы с контентом

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

if($start_row < 0) $start_row = 0;
if($start_row > $total) $start_row = $total;

Теперь для получения нужных записей на странице необходимо выполнить следующий SQL-запрос:

$result = mysql_query('SELECT * FROM table LIMIT $start_row.','.$per_page');

$items = array();
while($row = mysql_fetch_assoc($result)){
    $items[] = $row;
}

Теперь массив $items будет содержать результаты выборки.

Что же, осталось написать функцию, которая будет формировать ссылки на страницы.

Давайте создадим функцию, которая содержать 5 параметров:

function pagination($total,$per_page,$num_links,$start_row,$url=''){}

1. $total — общее число строк в базе данных
2. $per_page — количество элементов на странице
3. $num_links — чило ссылок от активной страницы
4. $start_row — номер строки с которой началась выборка из базы
5. $url — URL-адрес, который будет подставляться в ссылки

Первое что необходимо сделать это посчитать количество страниц, которое будет в пейджинге:

//Получаем общее число страниц
$num_pages = ceil($total/$per_page);

// Если страница одна, то ничего не выводим
if ($num_pages == 1) return '';

Получаем номер текущей страницы с учетом количества элементов на странице:

$cur_page = $start_row;

//Если количество элементов на страницы больше чем общее число элементов
// то текущая страница будет равна последней
if ($cur_page > $total){
   $cur_page = ($num_pages - 1) * $per_page;
}

//Получаем номер текущей страницы
$cur_page = floor(($cur_page/$per_page) + 1);

Получаем номер стартовой страницы выводимой в пейджинге:

$start = (($cur_page - $num_links) > 0) ? $cur_page - $num_links : 0;

Получаем номер последней страницы выводимой в пейджинге:

$end = (($cur_page + $num_links) < $num_pages) ? $cur_page + $num_links : $num_pages;

Теперь перходим к разметки и формируем ссылку на предыдущую страницу:

    if  ($cur_page != 1){
        $i = $start_row - $per_page;
        if ($i <= 0) $i = 0;
        $output .= '<i>←</i><a href="'.$url.'?p='.$i.'">Предыдущая</a>';
    }
    else{
        $output .='<span><i>←</i>Предыдущая</span>';
    }
    
    $output .= '<span class="divider">|</span>';

Формируем ссылку на следующую страницу:

if ($cur_page < $num_pages){
   $output .= '<a href="'.$url.'?p='.($cur_page * $per_page).'">Следующая</a><i>→</i>';
}
else{
    $output .= '<span>Следующая<i>→</i></span>';
}

$output .= '</span><br/>';

Формируем ссылку на первую страницу:

if($cur_page > ($num_links + 1)){
   $output .= '<a href="'.$url.'" title="Первая"><img src="images/left_active.png"></a>';
}

Формируем список страниц с учетом стартовой и последней страницы:

for ($loop = $start; $loop <= $end; $loop++){
    $i = ($loop * $per_page) - $per_page;

   if ($i >= 0){
       if ($cur_page == $loop){
           $output .= '<span>'.$loop.'</span>'; // Текущая страница
       }
       else{
           $n = ($i == 0) ? '' : $i;
           $output .= '<a href="'.$url.'?p='.$n.'">'.$loop.'</a>';
       }
   }
}

Формируем ссылку на последнюю страницу:

if (($cur_page + $num_links) < $num_pages){
    $i = (($num_pages * $per_page) - $per_page);
    $output .= '<a href="'.$url.'?p='.$i.'" title="Последняя"><img src="images/right_active.png"></a>';
}

Возвращаем полученный код:

return '<div class="wrapPaging"><strong>Страницы:</strong>'.$output.'</div>';

Вот полный код функции для организации пагинации:

function pagination($total, $per_page, $num_links, $start_row, $url=''){
    //Получаем общее число страниц
    $num_pages = ceil($total/$per_page);

    if ($num_pages == 1) return '';

    //Получаем количество элементов на страницы
    $cur_page = $start_row;

    //Если количество элементов на страницы больше чем общее число элементов
    // то текущая страница будет равна последней
    if ($cur_page > $total){
        $cur_page = ($num_pages - 1) * $per_page;
    }

    //Получаем номер текущей страницы
    $cur_page = floor(($cur_page/$per_page) + 1);

    //Получаем номер стартовой страницы выводимой в пейджинге
    $start = (($cur_page - $num_links) > 0) ? $cur_page - $num_links : 0;
    //Получаем номер последней страницы выводимой в пейджинге
    $end   = (($cur_page + $num_links) < $num_pages) ? $cur_page + $num_links : $num_pages;

    $output = '<span class="ways">';

    //Формируем ссылку на предыдущую страницу
    if  ($cur_page != 1){
        $i = $start_row - $per_page;
        if ($i <= 0) $i = 0;
        $output .= '<i>←</i><a href="'.$url.'?p='.$i.'">Предыдущая</a>';
    }
    else{
        $output .='<span><i>←</i>Предыдущая</span>';
    }
    
    $output .= '<span class="divider">|</span>';

    //Формируем ссылку на следующую страницу
    if ($cur_page < $num_pages){>
        $output .= '<a href="'.$url.'?p='.($cur_page * $per_page).'">Следующая</a><i>→</i>';
    }
    else{
        $output .='<span>Следующая<i>→</i></span>';
    }

    $output .= '</span><br/>';

    //Формируем ссылку на первую страницу
    if  ($cur_page > ($num_links + 1)){
        $output .= '<a href="'.$url.'" title="Первая"><img src="images/left_active.png"></a>';
    }

    // Формируем список страниц с учетом стартовой и последней страницы   >
        for ($loop = $start; $loop <= $end; $loop++){
        $i = ($loop * $per_page) - $per_page;

        if ($i >= 0)
        {
            if ($cur_page == $loop)
            {
               //Текущая страница
               $output .= '<span>'.$loop.'</span>'; 
            }
            else
            {

               $n = ($i == 0) ? '' : $i;

               $output .= '<a href="'.$url.'?p='.$n.'">'.$loop.'</a>';
            }
        }
    }

    //Формируем ссылку на последнюю страницу
    if (($cur_page + $num_links) < $num_pages){
        $i = (($num_pages * $per_page) - $per_page);
        $output .= '<a href="'.$url.'?p='.$i.'" title="Последняя"><img src="images/right_active.png"></a>';
    }

    return '<div class="wrapPaging"><strong>Страницы:</strong>'.$output.'</div>';
}

А вот стили:

div.wrapPaging {padding: 6px 0px 6px 16px; font-family: Arial, sans-serif; font-size: 14px; clear: both;}
div.wrapPaging a, div.wrapPaging span {margin: 0 1px; padding: 2px 5px; line-height: 26px; text-decoration: none;}
div.wrapPaging a {background: none; color: #025A9C !important; text-decoration: underline; font-size: 14px;}
div.wrapPaging span {background: #E8E9EC; color: #000;}
div.wrapPaging span.ways {background: none; font-size: 15px; color: #999;}
div.wrapPaging span.ways span {background: none; color: #999;}
div.wrapPaging span.ways a {font-size: 15px;}
div.wrapPaging span.divider {color: #999;}
div.wrapPaging i {font-family: Times, sans-serif; margin: 0 5px 0 0;}
div.wrapPaging a:hover {color: #ff0000;}
div.wrapPaging strong {margin: 0 15px 0 0; font-size: 16px; font-weight: bold; color: #000;}

Теперь в нужном Вам месте необходимо вызвать эту функцию и передать ей нужные параметры:

<?php echo pagination($total,$per_page,$num_page,$start_row,'/categories.php');?>

Ну вот собственно и все! Удачи!

Оцените эту статью:



ТЕГИ:
навигация , pagination
Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Простая CRM

Salesap CRM

Нашли ошибку в тексте

Система Orphus
Copyright © 2008-2024 Шамшур Иван. Все права защищены.
https://biznesguide.ru/coding/131.html
4 из 5 на основе 55 оценок.