Постраничная навигация с использованием AJAX и jQuery. Часть 1

Дата публикации: 2013-06-11

Постраничная навигация с использованием AJAX и jQuery

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

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

1. Постановка задачи

Итак, что нам потребуется для данного урока? Нам потребуется любой сайт, на котором выводится большое количество записей на одной странице. Такой сайт я уже заготовил, вот так он выглядит:

Как Вы видите, он очень простой, главное, что на его главной странице выводится 76 различных статей. Согласитесь – это не рационально, так как такой вывод создает большую нагрузку на сервер, особенно при большом посещении, а также значительно усложняет поиск нужной информации. Поэтому наша задача разбить данные статьи на несколько дополнительных страниц и выводить, скажем, по 5 статей на одной странице. Далее необходимо отобразить панель навигации, для удобного перемещения по этим станицам.

Теперь давайте рассмотрим, как устроен данный сайт, что бы у Вас было понимание, как он работает. Итак, файловая структура сайта:

сss
—style.css
file
config.php
functions.php
index.php

Смотрите, в папке сss содержится файл style.css, в котором описаны все сss правила данного сайта, далее в папке file — располагаются некоторые изображения статей. Файл с основными настройками сайта:

<?php
///////////////config//////////////////
define('DB_HOST','localhost');
define('DB_USER','Viktor');
define('DB_PASSWORD','1234');
define('DB_NAME','my_bd');

$site_name = 'Тестовый сайт';
///////////////config//////////////////

//
$db = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD);

if(!$db) {
	exit('No connection with database');
}

if(!mysql_select_db(DB_NAME,$db)) {
	exit('Wrong database');
}
mysql_query("SET NAMES UTF8");
?>

<?php

///////////////config//////////////////

define('DB_HOST','localhost');

define('DB_USER','Viktor');

define('DB_PASSWORD','1234');

define('DB_NAME','my_bd');

$site_name = 'Тестовый сайт';

///////////////config//////////////////

$db = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD);

if(!$db) {

exit('No connection with database');

}

if(!mysql_select_db(DB_NAME,$db)) {

exit('Wrong database');

}

mysql_query("SET NAMES UTF8");

Как Вы видите, ничего сложного – просто объявляем четыре константы необходимые для подключения к базе данных и собственно выполняем это подключение, с выбором базы данных и определением кодировки для запросов. Следующий файл – файл functions.php:

<?php
function get_statti() {
		$result = mysql_query("SELECT id,title,author,date,img_src,
										discription,view,ball,kol_gol 
										FROM statti");
		if (!$result){
			exit("<p>В базе данных не обнаружено таблицы проверте настройки</p>");
		}
		if(mysql_num_rows($result) == 0) {
			exit('Статтей нет');
		}
		$row = array();
		for($i = 0; $i < mysql_num_rows($result); $i++) {
			$row[] = mysql_fetch_array($result,MYSQL_ASSOC);
		}				
		return $row;
	}
?>

<?php

function get_statti() {

$result = mysql_query("SELECT id,title,author,date,img_src,

discription,view,ball,kol_gol

FROM statti");

if (!$result){

exit("<p>В базе данных не обнаружено таблицы проверте настройки</p>");

}

if(mysql_num_rows($result) == 0) {

exit('Статтей нет');

}

$row = array();

for($i = 0; $i < mysql_num_rows($result); $i++) {

$row[] = mysql_fetch_array($result,MYSQL_ASSOC);

}

return $row;

}

Его основная роль – хранить в себе все функции, необходимые для работы всего сайта, на данном этапе, описана всего лишь одна функция — get_statti(), которая получает все статьи из базы данных и формирует многоуровневый массив, который впоследствии и возвращает, как результат своей работы. Далее, по ходу урока, мы создадим еще несколько функций в данном файле.

И последний файл — index.php:

<?php
header("Content-Type:text/html;charset=UTF-8");
//подключаем файл конфигурации
include 'config.php';
include 'functions.php';

$result =  get_statti();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link  rel="stylesheet" href="css/style.css"/>
</head>

<body>
	<div class="wrap">
		
		<div class='header'>
			<? echo '<h2>'.$site_name.'</h2>';?>
			<hr>
		</div>
		
		<div class='content'>
			<div class="main_text">
			<?		
				foreach($result as $row) {
				
					printf("<table class='table' width='780' border='0' cellspacing='0' cellpadding='0'>
				     		 <tr>
				     		 <td class='td_top'>
				      		<h5>%s</h5>
							<p>Автор: %s<br>
				     		 Дата добавления: %s
							 </td>
				            </tr>
				            <tr>
				            <td>
								<p>%s</p></td>
				            </tr>
				            <tr>
				            <td>
							<p>Просмотров: %s </p>
							</td>
				            </tr>
				            </table>
							",$row['id'], $row['title'], $row['author'], $row['author'], $row['date'], $row['img_src'], $row['discription'], $row['view']);
				}
			?>
			</div>
			<hr>
		</div>
		
		<div class='footer'>
			<hr>
			<? echo "<p style='text-align:right;font_size:5px;'>".$site_name."</p>";?>
		</div>
	</div>
</body>
</html>
?>

<?php

header("Content-Type:text/html;charset=UTF-8");

//подключаем файл конфигурации

include 'config.php';

include 'functions.php';

$result = get_statti();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

<? echo '<h2>'.$site_name.'</h2>';?>

<hr>

</div>

foreach($result as $row) {

printf("<table class='table' width='780' border='0' cellspacing='0' cellpadding='0'>

<tr>

<p>Автор: %s<br>

Дата добавления: %s

</td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

<p>Просмотров: %s </p>

</td>

</tr>

</table>

",$row['id'], $row['title'], $row['author'], $row['author'], $row['date'], $row['img_src'], $row['discription'], $row['view']);

}

</div>

<hr>

</div>

<hr>

<? echo "<p style='text-align:right;font_size:5px;'>".$site_name."</p>";?>

</div>

</body>

</html>

Как Вы видите, также все очень просто: вначале отправляем запрос с кодировкой сайта, затем подключаем требуемые файлы (config.php и functions.php), далее вызываем функцию get_statti() и в переменную $result, сохраняем массив со статьями. Далее, используя цикл foreach, проходим по массиву и выводим статьи на экран.

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

2. Общее количество статей

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

<?php
function get_count_statti() {
		$sql = 'SELECT COUNT(*) FROM statti';
		$result = mysql_query($sql);
		
		if(!$result) {
			exit(mysql_error());
		}
		
		return mysql_result($result,0);
	}
?>

<?php

function get_count_statti() {

$sql = 'SELECT COUNT(*) FROM statti';

$result = mysql_query($sql);

if(!$result) {

exit(mysql_error());

}

return mysql_result($result,0);

}

Так как нам необходимо только лишь узнать общее количество статей в базе данных, то при формировании SQL запроса воспользуемся конструкцией COUNT(*). Далее выполним данный запрос и получаем результат, используя функцию mysql_result().

Теперь давайте перейдем в файл index.php и вызовем, только что созданную функцию:

<?php
$count_statti = get_count_statti();
echo $count_statti;
?>

<?php

$count_statti = get_count_statti();

echo $count_statti;

Так же можно вывести значение переменной $count_statti на экран, что бы убедиться, что функция работает правильно:

Как Вы видите, все отлично отработало.

3. Получение общего количества требуемых страниц

Далее, нам необходимо узнать, сколько необходимо страниц для отображения 76 статей нашего сайта (76 статей у нас всего в базе данных). Но перед этим необходимо определиться, сколько мы хотим выводить статей на одной странице. Для этого давайте добавим в конфигурационный файл – config.php, еще одну настройку, для хранения количества статей выводимых на одной странице:

<?php
define("COUNT_PER_PAGE",5);
?>

<?php

define("COUNT_PER_PAGE",5);

Теперь переходим в файл functions.php и создадим следующую функцию:

<?php
function number_pages($count_statti,$count_per_page) {
		
		if($count_statti < $count_per_page) {
			return FALSE;
		}
		
		$number_pages = (int)($count_statti/$count_per_page);
		
		if(($count_statti%$count_per_page) != 0) {
			$number_pages++;
		}
		
		return $number_pages;
	}
?>

<?php

function number_pages($count_statti,$count_per_page) {

if($count_statti < $count_per_page) {

return FALSE;

}

$number_pages = (int)($count_statti/$count_per_page);

if(($count_statti%$count_per_page) != 0) {

$number_pages++;

}

return $number_pages;

}

Для большей универсальности и независимости функции number_pages(), будем передавать ей следующие параметры: $count_statti – общее количество статей в базе данных (в нашем примере – данное количество возвращает функция get_count_statti()) и $count_per_page – общее количество статей выводимых на одной странице (это ни что иное как константа COUNT_PER_PAGE).

Итак, первым делом проверяем – нужно ли вообще разбивать вывод статей на отдельные страницы, то есть если общее количество статей меньше, чем количество статей выводимых на одной странице, то конечно постраничная навигация в таком случае не нужна, при этом завершаем работу функции путем возврата ложного значения. Если данная проверка не выполнилась – переходим дальше. Создаем переменную $number_pages, в которой будет храниться количество страниц необходимых для вывода всех статей. Затем делим общее количество статей, на количество статей выводимых на одной странице и тем самым, получаем искомое число требуемых страниц. Только приводим к типу данных integer, что бы убрать дробную часть, если такая имеется.

Далее проверим, если при делении двух предыдущих значений получается остаток от деления, значит, полученное количество страниц необходимо увеличить на единицу. Остаток от деления можно получить, используя оператор %.
Теперь давайте перейдем в файл index.php и вызовем данную функцию:

<?php
$number_pages = number_pages($count_statti,COUNT_PER_PAGE);
echo $number_pages;
?>

<?php

$number_pages = number_pages($count_statti,COUNT_PER_PAGE);

echo $number_pages;

Теперь мы знаем, сколько необходимо страниц (16 страниц), что бы вывести 76 статей по 5 статей на страницу. Данное значение нам понадобится в следующем уроке при создании навигационной панели по постраничной навигации.

4. Вывод статей с учетом разбиения на страницы

Теперь необходимо вывести статьи с учетом постраничной навигации, для этого в файле functions.php, создадим новую функцию:

<?php
function get_posts($page,$count_per_page) {
		
		$start = ($page - 1)*$count_per_page;
		
		$sql = "SELECT id,title,author,date,img_src,discription,view,ball,kol_gol 
											FROM statti
											ORDER BY id
											LIMIT ".$start.",".$count_per_page;
		$result = mysql_query($sql);
		
		if (!$result){
			exit("<p>В базе данных не обнаружено таблицы проверте настройки</p>");
		}
		if(mysql_num_rows($result) == 0) {
			exit('Статтей нет');
		}
		
		$row = array();
		for($i = 0; $i < mysql_num_rows($result); $i++) {
			$row[] = mysql_fetch_array($result,MYSQL_ASSOC);
		}				
		return $row;
											
	}
?>

<?php

function get_posts($page,$count_per_page) {

$start = ($page - 1)*$count_per_page;

$sql = "SELECT id,title,author,date,img_src,discription,view,ball,kol_gol

FROM statti

ORDER BY id

LIMIT ".$start.",".$count_per_page;

$result = mysql_query($sql);

if (!$result){

exit("<p>В базе данных не обнаружено таблицы проверте настройки</p>");

}

if(mysql_num_rows($result) == 0) {

exit('Статтей нет');

}

$row = array();

for($i = 0; $i < mysql_num_rows($result); $i++) {

$row[] = mysql_fetch_array($result,MYSQL_ASSOC);

}

return $row;

}

Работа данной функции полностью аналогична функции get_statti(), за исключением передаваемых параметров и некоторых моментов, связанных с формированием SQL запроса.

Итак, первым делом, давайте подумаем, каким должен быть SQL запрос по выборке статей с учетом разбиения на страницы. Думаю, Вы уже догадались, что для этого нам потребуется ограничивать выборку, используя конструкцию LIMIT. Как Вы помните при использовании данной конструкции, можно передавать значение — с какого необходимо выбирать данные и следующее значение – сколько выбирать записей из базы данных. Данной конструкцией мы и воспользуемся. Итак, вначале, необходимо определить число – значение – с какой, записи необходимо начинать выборку (причем если необходимо выбирать с 1 записи, то мы получим записи 2,3,4 и так далее). Для этого отнимем от переменной $page ($page — номер страницы, который, как параметр принимает функция get_posts()) единицу и умножаем на количество число статей выводящихся на одной странице – переменная $count_per_page, которая как параметр передается функции get_posts(). И таким образом мы получаем переменную $start – это и есть значение, с которого необходимо выбирать записи из базы данных. А количество записей, которое необходимо выбрать – это ни что иное как переменная $count_per_page.

Теперь, используя эти данные, формируем и выполняем запрос к базе данных. Затем как обычно, при помощи цикла for, формируем и возвращаем массив $row.

Теперь, давайте откроем файл index.php, удалим строку — $result = get_statti(), так как данная функция нам больше не нужна, и добавим следующий код:

<?php
if($_GET['page']) {
	$page = (int)$_GET['page'];
	if(!$page) {
		$page = 1;
	}
}
else {
	$page = 1;
}

$result =  get_posts($page,COUNT_PER_PAGE);
?>

<?php

if($_GET['page']) {

$page = (int)$_GET['page'];

if(!$page) {

$page = 1;

}

else {

$page = 1;

}

$result = get_posts($page,COUNT_PER_PAGE);

Итак, давайте условимся, что номер страницы мы будем передавать, через адресную строку, то есть, используя суперглобальный массив GET и его ячейку page. Так же если данная ячейка пуста, либо в ней сохранено не числовое значение, то по умолчанию номер отображаемой страницы, а значит и переменная $page будет равна 1.
Далее просто вызываем функцию get_posts() и передаем ей первым параметром — номер отображаемой страницы, а вторым – сколько записей необходимо отображать на одной странице. Теперь можно перейти в браузер и посмотреть, что у нас получилось.

Как Вы видите, теперь на главной странице сайта уже не выводятся все 76 статей, а всего первые 5 и для того, что бы увидеть вторую страницу, необходимо передать через адресную строку переменную $page, то есть вот таким образом: ?page=2. При этом мы увидим следующие пять статей, и так далее.
Итак, мы с Вами создали основную логику постраничной навигации, но согласитесь доступ к страницам через адресную строку – крайне не удобен, поэтому нам необходимо создать удобную навигационную панель, для быстрого перемещения по страницам.

Но об этом мы поговорим в следующем уроке (во второй части данного урока). А сейчас давайте прощаться. Удачного Вам кодирования и увидимся в следующих уроках.

Метки: pagination, постраничная навигация