Постраничный вывод (или постраничная навигация) на сайте используется повсеместно в настоящем интернете. Такой элемент интерфейса как "постраничная навигация" решает многие задачи: порционность информации, ускорение загрузки и экономия трафика, ускорение поиска информации. В последнее время вводится похожий элемент "показать еще", выполняющий родственную функцию, но статья не об этом.

Существует множество решений как реализовать вывод по страницам. Мы рассмотрим не супер простое, но лаконичное и удобное решение для вывода. Будем считать что данные у нас хранятся в базе MySQL, а сайт работает на PHP.

Рассмотрим немного теории как оно работает, а дальше все будет понятно.
Данные у нас хранятся в базе MySQL. Если есть задача вывести только первые 20 материалов, то к своему запросу мы добавим LIMIT 0, 20. Чтобы вывести следующие 20 материалов мы поправим запрос и укажем, что 20 материалов надо пропустить и взять еще 20 (т.е. от 20 до 40) - LIMIT 20, 20. В следующий раз - LIMIT 40, 20. Как вы уже догадались мы выведем три разных страницы по 20 наших материалов.

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

Давайте я сразу приведу функции и мы немного разберем их.

Функция pagination инициализирует наш постраничный вывод. Имеет 4 параметра: страницу на которой находимся сейчас, маску URL, количество строк в БД и параметра указывающего сколько выводить материалов на страницу. Функция возвращает массив с данными (маску URL, текущую страницу и т.д.) + добавляет параметр LIMIT с параметрами подготовленными для вставки в запрос.

function pagination ($paginIsNowPage, $mask, $paginCountPost, $paginLimitPerPage = 10) {
	$prefixMenu = '';
	$nowPageStart      = $paginIsNowPage != '' ? $paginIsNowPage : 1;
	$paginMaskUrlPage  = $prefixMenu.'/'.$mask;
	if (!$paginIsNowPage) {
		$pageLimit = 'LIMIT 0, '.$paginLimitPerPage;
	} else {
		$psNum1 = ($paginLimitPerPage*$nowPageStart) - $paginLimitPerPage;
		$pageLimit = 'LIMIT '.$psNum1.', '.$paginLimitPerPage;
	}
		$paginator['pageLimit'] = $pageLimit;
		$paginator['paginCountPost'] = $paginCountPost;
		$paginator['paginLimitPerPage'] = $paginLimitPerPage;
		$paginator['nowPageStart'] = $nowPageStart;
		$paginator['paginMaskUrlPage'] = $paginMaskUrlPage;

		return $paginator;
}

Вторая же функция "кушает" массив и выводит кнопки для постраничной навигации, если страница текущая то она ссылкой не является, а просто выделена жирным шрифтом.

function paginator ($paginator) {
	if ($paginator['paginCountPost'] > $paginator['paginLimitPerPage']) {
		$countPages = 0;
		for ($i=0; $i<$paginator['paginCountPost']; $i+=$paginator['paginLimitPerPage']) {
			$countPages++;
			if ($paginator['nowPageStart'] == $countPages) {
				echo '<b>'.$countPages.'</b>  ';
			} else {
				$countPagesUrl = $countPages == 1 ? '' :  'page/' . $countPages;
				echo '<a href="'.$paginator['paginMaskUrlPage'].'/'.$countPagesUrl.'">'.$countPages.'</a>  ';
			}
		}
	}
}

Используются функции вот так:

// $count =  тут надо подсчитать количество строк в базе, а именно количество статей всех которые собираемся выводить.
// Запрос должен быть вида SELECT id FROM mytable, подсчитать количество строк можно mysql_num_rows()

$paginator = pagination(isset($_GET['paginator']) ? (int)$_GET['paginator'] : 0, 'page', $count, 10);

// Вывод Ваших записей, в конце своего запроса поставьте параметр $paginator['pageLimit'], он содержит в себе LIMIT

<div class="paginator">
<?php paginator ($paginator); ?>
</div>

Выражение isset($_GET['paginator']) ? (int)$_GET['paginator'] : 0, ничто иное как краткая запись if, мы просто ловим параметр paginator, что означает страницу в URL, в примере используется шаблон /page/1

Второй параметр маска URL. Третий мы передаем количество строк в базе, а четвертым указываем на ограничение в 10 записей на страницу.

Наш постраничный вывод можно оформить с помощью CSS.

.paginator {
text-align: center;
margin:10px;
}

.paginator a{
background: #f1f1f1;
border: solid 1px #eee;
padding: 3px 5px;
text-decoration: none;
}

.paginator a:hover{
background: #851a62;
border: solid 1px #570c3e;
color: #fff;
}

Собственно как видно скрипт не сложный, зато использование очень просто и универсально.

(4 votes, average: 5,00 из 5)

 Loading ...