Постраничная навигация есть практически на каждом сайте, так как является неотъемлемой его частью, позволяет удобно и правильно использовать ресурс в плане перехода с одной страницы на другую, экономя при этом значительно скорость загрузки ресурса в целом. В данном материале, мы рассмотрим постраничную навигацию выполненную посредством языков веб программированию php и mysql.
Создадим базу данных navigation с привилегиями: имя пользователя - "root", пароль -"". В ней будем хранить две таблицы: materials и navigation. В таблице materials будут два поля: id и title, а в таблице navigation будут тоже два поля: id и materials.
Таблица materials.
-- -- Table structure for table `materials` -- CREATE TABLE IF NOT EXISTS `materials` ( `id` int(10) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=11 ; -- -- Dumping data for table `materials` -- INSERT INTO `materials` (`id`, `title`) VALUES (1, 'Один'), (2, 'Два'), (3, 'Три'), (4, 'Четыре'), (5, 'Пять'), (6, 'Шесть'), (7, 'Семь'), (8, 'Восемь'), (9, 'Девять'), (10, 'Десять');
Таблица navigation.
-- -- Table structure for table `navigation` -- CREATE TABLE IF NOT EXISTS `navigation` ( `id` int(2) NOT NULL AUTO_INCREMENT, `materials` int(10) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=2 ; -- -- Dumping data for table `navigation` -- INSERT INTO `navigation` (`id`, `materials`) VALUES (1, 3);
Для начала, давайте подключимся к базе данных MySQL.
// указываем параметры для подключения к MySQL
$host='localhost'; // имя хоста
$database='navigation'; // имя базы данных
$user='root'; // имя пользователя
$pass=''; // пароль пользователя
// подключаемся к MySQL
$db = mysql_connect($host, $user, $pass) or die("Нет соединения с MySQL!");
mysql_select_db($database) or die("Не могу подключиться к базе данных!");
Подключаем постраничную навигацию, подробно все расписано в комментариях. Из основных моментов, хотелось бы отметить, что количество материалов на странице, я решил занести в базу данных исходя из следующих соображений.
Во-первых, таким образом будет проще изменять количество материалов с помощью обновления при обращении к таблице navigation. Во-вторых, не потребуется водить значение количества материалов в переменную. При перемещении по навигации, задействована данная страница index.php, поэтому если у Вас навигация будет находится в другом файле, который по другому назван, соответственно исправьте на нужный!
// Выбираем из таблицы navigation поле materials
// в котором хранится количество материалов на странице
$result = mysql_query("SELECT materials FROM navigation");
$myrow = mysql_fetch_array($result);
$num = $myrow["materials"];
// Извлекаем из URL текущую страницу
@$page = $_GET['page'];
// Определяем общее число сообщений в базе данных
$result_nav = mysql_query("SELECT COUNT(*) FROM materials");
$temp = mysql_fetch_array($result_nav);
$posts = $temp[0];
// Находим общее число страниц
$total = (($posts - 1) / $num) + 1;
$total = intval($total);
// Определяем начало сообщений для текущей страницы
$page = intval($page);
// Если переменная $page меньше единицы или отрицательно
// переходим на первую страницу
// А если слишком большое, то переходим на последнюю
if(empty($page) or $page < 0) $page = 1;
if($page > $total) $page = $total;
// Вычисляем начиная с какого номера
// следует выводить сообщения
$start = $page * $num - $num;
// Выбираем $num сообщений начиная с номера $start
// Проверяем нужны ли стрелки назад
if ($page != 1) $pervpage = '<a href=index.php?&page=1>Первая</a> |
<a href=index.php?&page='. ($page - 1) .'>Предыдущая</a> | ';
// Проверяем нужны ли стрелки вперед
if ($page != $total) $nextpage = ' | <a href=index.php?&page=
'. ($page + 1) .'>Следующая</a> | <a href=index.php?&page=' .$total. '>
Последняя</a>';
// Находим две ближайшие станицы с обоих краев, если они есть
if($page - 5 > 0) $page5left = ' <a href=index.php?&page='.
($page - 5) .'>'. ($page - 5) .'</a> | ';
if($page - 4 > 0) $page4left = ' <a href=index.php?&page='.
($page - 4) .'>'. ($page - 4) .'</a> | ';
if($page - 3 > 0) $page3left = ' <a href=index.php?&page='.
($page - 3) .'>'. ($page - 3) .'</a> | ';
if($page - 2 > 0) $page2left = ' <a href=index.php?&page='.
($page - 2) .'>'. ($page - 2) .'</a> | ';
if($page - 1 > 0) $page1left = ' <a href=index.php?&page='.
($page - 1) .'>'. ($page - 1) .'</a> | ';
if($page + 5 <= $total) $page5right = ' | <a href=index.php?&page='.
($page + 5) .'>'. ($page + 5) .'</a>';
if($page + 4 <= $total) $page4right = ' | <a href=index.php?&page='.
($page + 4) .'>'. ($page + 4) .'</a>';
if($page + 3 <= $total) $page3right = ' | <a href=index.php?&page='.
($page + 3) .'>'. ($page + 3) .'</a>';
if($page + 2 <= $total) $page2right = ' | <a href=index.php?&page='.
($page + 2) .'>'. ($page + 2) .'</a>';
if($page + 1 <= $total) $page1right = ' | <a href=index.php?&page='.
($page + 1) .'>'. ($page + 1) .'</a>';
// Выводим страницу на которой мы находимся
if ($total > 1)
{
echo $pervpage.$page5left.$page4left.$page3left.$page2left.$page1left.'
<span class="navigation_a_hover">'.$page.'</span>
'.$page1right.$page2right.$page3right.$page4right.$page5right.$nextpage;
}
Ну и последнее действие, это вывод всех материалов. Делаем запрос к таблице materials и выводим оттуда все записи из таблицы, а также не забываем прописать переменные с лимитом $start и $num, - это в общем, то и есть наша постраничная навигация.
// Выбираем все поля из таблицы materials с лимитом навигации
// по количеству материалов на странице
$sql = mysql_query("select * from materials limit $start, $num");
$row=mysql_fetch_array($sql);
do
{
echo "<div class='materials_div'>";
echo $row["id"]." | ".$row["title"];
echo"</div>";
}
while ($row = mysql_fetch_array($sql));
// Выводим количество материалов на странице
echo "<div class='navigation_count'>
Выводится по $myrow[materials] материала</div>";
Предадим немного стилей нашей навигации.
a
{
color: blue;
font-size: 20;
font-family: Tahoma;
text-decoration: none;
}
a:hover
{
color: red;
}
.navigation_a_hover
{
color: red;
font-size: 20;
font-family: Tahoma;
}
.materials_div
{
color: black;
font-size: 20;
font-family: Tahoma;
padding-top: 20px;
}
.navigation_count
{
color: grey;
font-size: 17;
font-family: Tahoma;
text-align: left;
margin-top: 20px;
}
Надеюсь, данный урок был Вам полезен и возможно где-то пригодиться или уже пригодился! Если же вдруг Вам не нужна постраничная навигация, а примеру Вы хотите чтобы данные подгружались, советую рассмотреть материал AJAX подгрузка контента при прокрутке, возможно она Вам больше пригодится!
Есть одно еще маленькое замечание, если потребуется вывести блог с изменением количества материалов на странице, ну допустим, в select будет список количества материалов на странице 1, 3, 10, 15 и так далее - пишите в комментариях и я расскажу как это можно реализовать. Спасибо всем за внимание, удачи!