Постраничная навигация может быть не только на php, но и на jQuery. Для этого был разработн jQuery плагин jPaginate. Палгин поддерживается большинстовм браузеров.

• Google Chrome 9+
• Opera 10.5+
• Firefox 4+
• Safari 3.2+
• Internet Explorer 6 +

Плагин хорошо сделан, но вряд ли кому-то захочется указывать его настройки вручную, постоянно изменять настройки, если например постраничных данных стало больше или меньше. В статье я расскажу как совместить плагин jPaginate с php и Mysql и седлать на основе ajax постраничную навигацию.

---

HTML структура

Для создания постраничной навигации требуется контейнер (div) с id, внутри которого будет находится список li элементов с расположенными внутри элементами ссылками. Который указан в следующем листинге.

<div class="demo"> <h1>Пример постраничной навигации</h1> <div id="demo1"> </div> </div> </textarea

Постраничная навигация создаётся следующим методом, где используются следующие параметры "count" - количество страниц, в нашем случае - 100, start - начальная позиция у нас она - 1 и display - количество отображаемых страниц (в нашем случае 8), остальные будут размещены за пределами видимости. Дополнительные настройки касаются только стилевого оформления.

$(function() { $("#demo1").paginate({ count : 100, start : 1, display : 8, border : true, border_color : '#fff', text_color : '#fff', background_color : 'black', border_hover_color : '#ccc', text_hover_color : '#000', background_hover_color : '#fff', images : false, mouse : 'press' }); });

 

jPaginate поддерживает возможность создания внутренних обработчиков для определенных событий, например на событие change. Как пример, его можно использовать для подгруздки данных через ajax методы jQuery

$(function() { $("#demo5").paginate({ count : 10, start : 1, display : 7, border : true, border_color : '#fff', text_color : '#fff', background_color : 'black', border_hover_color : '#ccc', text_hover_color : '#000', background_hover_color : '#fff', images : false, mouse : 'press', onChange : function(page){ $('._current','#paginationdemo').removeClass('_current').hide(); $('#p'+page).addClass('_current').show(); } }); });

Для правильной работы предыдущего примера, DIV элементы должны состоять из следующей HTML структуры.

<div id="paginationdemo" class="demo"> <h1>Demo 5</h1> <div id="p1" class="pagedemo _current" style="">Page 1</div> <div id="p2" class="pagedemo" style="display:none;">Page 2</div> <div id="p3" class="pagedemo" style="display:none;">Page 3</div> <div id="p4" class="pagedemo" style="display:none;">Page 4</div> <div id="p5" class="pagedemo" style="display:none;">Page 5</div> <div id="p6" class="pagedemo" style="display:none;">Page 6</div> <div id="p7" class="pagedemo" style="display:none;">Page 7</div> <div id="p8" class="pagedemo" style="display:none;">Page 8</div> <div id="p9" class="pagedemo" style="display:none;">Page 9</div> <div id="p10" class="pagedemo" style="display:none;">Page 10</div> <div id="demo5"> </div> </div>

Чтобы статьи подгружались через ajax можно использовать следующий код.

<?php //////////////////////////////////////////////////////////////////////////////////////////\ class jPaginateajax { private $mMysqli; // подключаемся к базе данных function __construct() { // connect to the database $this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASS,DB_DATABASES); } // отключаемся от базы данных function __destruct() { $this->mMysqli->close(); } function yandex_link_bar() { // Подключение к базе данных $this->mMysqli->query("SET NAMES 'utf8'"); $this->mMysqli->query("SET CHARACTER SET 'utf8'"); $query = "SELECT * FROM `statii` WHERE razdel='jquery' ORDER BY time DESC"; // Общее количество информации $count = $this->mMysqli->query($query)->num_rows; $pages_count = ceil($count / 5); // Количество страниц // Если номер страницы оказался больше количества страниц if ($page > $pages_count) $page = $pages_count; $start_pos = ($page - 1) * $perpage; // Начальная позиция, для запроса к БД // Вызов функции, для вывода ссылок на экран echo ' <script type="text/javascript"> $("#demo5").paginate({ count : '.$pages_count.', start : 1, display : 7, border : true, border_color : '#fff', text_color : '#fff', background_color : 'black', border_hover_color : '#ccc', text_hover_color : '#000', background_hover_color : '#fff', images : false, mouse : 'press', onChange : function(page){ $('._current','#paginationdemo').removeClass('_current').hide(); $('#p'+page).load('ajax.php','id='+page,function(){ $('#p'+page).addClass('_current').show(); }); } }); </script> '; } // Конец функции } $jpaginateajax = new jPaginateajax(); $jpaginateajax ->yandex_link_bar(); ?>

Результат с реагированием на событие onchange. Нажмите одну из страниц и Вы получите список статей через ajax.

src="/scriptsforpost/918/jpaginate/iframe.php"

Ниже указан скрипт, позволяющий создавать постраничную навигацию на основе содержащихся в базе mysql данных на серверной стороне. Я не стал усложнять его ООП.

<?php require_once $_SERVER['DOCUMENT_ROOT'].'/config.php'; define('RAZDEL','jquery'); // Подключение к базе данных $conection = mysql_connect("localhost","$user","$pass"); $db = mysql_select_db("$dbs", $conection) or die('Ошибка:'.mysql_error()); mysql_query("SET NAMES 'utf8'"); mysql_query("SET CHARACTER SET 'utf8'"); // Подготовка к постраничному выводу $page = $_GET['id']; $perpage = 5; // Количество отображаемых данных из БД if (empty($page) || ($page <= 0)) { $page = 1; } else { $page = (int) $page; // Считывание текущей страницы } // Общее количество информации if(isset($_SESSION['sort'])){ if($_SESSION['sort']=="sort1") { $count = mysql_numrows(mysql_query("SELECT statii.time,statii.href,statii.count,statii.comment,statii.opisanie, statii.name,statii.si, ratings.total_value FROM statii,ratings WHERE statii.razdel='".RAZDEL."' AND ratings.id=statii.time ORDER BY ratings.total_value DESC")); } elseif($_SESSION['sort']=="sort2") { $count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY comment DESC")); } elseif($_SESSION['sort']=="sort3") { $count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC")); } elseif($_SESSION['sort']=="sort4") { $count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY count DESC")); } } else { $count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC")); } $pages_count = ceil($count / $perpage); // Количество страниц // Если номер страницы оказался больше количества страниц if ($page > $pages_count) $page = $pages_count; $start_pos = ($page - 1) * $perpage; // Начальная позиция, для запроса к БД // Вызов функции, для вывода ссылок на экран $conection = mysql_connect("localhost","$user","$pass"); $db = mysql_select_db("$dbs", $conection) or die('Ошибка:'.mysql_error()); mysql_query("SET NAMES 'utf8'"); mysql_query("SET CHARACTER SET 'utf8'"); if(isset($_SESSION['sort'])){ if($_SESSION['sort']=="sort1") { $query = "SELECT statii.time,statii.href,statii.count,statii.comment,statii.opisanie,statii.si, statii.name, ratings.total_value FROM statii,ratings WHERE statii.razdel='".RAZDEL."' AND ratings.id=statii.time ORDER BY ratings.total_value/ratings.total_votes DESC LIMIT ".$start_pos.', '.$perpage; } elseif($_SESSION['sort']=="sort2") { $query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY comment DESC LIMIT ".$start_pos.', '.$perpage; } elseif($_SESSION['sort']=="sort3") { $query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC LIMIT ".$start_pos.', '.$perpage; } elseif($_SESSION['sort']=="sort4") { $query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY count DESC LIMIT ".$start_pos.', '.$perpage; } } else { $query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC LIMIT ".$start_pos.', '.$perpage; } $result = mysql_query($query); $time = time(); $day = round($time / (60 * 60 * 24),0); $month = round($time / (60 * 60 * 24 * 30),0); $yars = round($time / (60 * 60 * 24 * 30 * 12),0); if($result) { while($res = mysql_fetch_assoc($result)) { $alldate = date('Y.m.d',$res['time']); $daystaia = round($res['time'] / (60 * 60 * 24),0); $lastmodify = $day - $daystaia; if($lastmodify <= 31) { if($lastmodify==1) $days = 'день'; elseif($lastmodify == 2 || $lastmodify==3 || $lastmodify==4) $days = 'дня'; else $days = 'дней'; } else { $daystaia = round($res['time'] / (60 * 60 * 24 * 30),0); $lastmodify = $month - $daystaia; if($lastmodify <= 12) { if($lastmodify==1) $days = 'месяц'; elseif($lastmodify==2 || $lastmodify==3 || $lastmodify==4) $days = 'месяца'; else $days = 'месяцев'; } else { $daystaia = round($res['time'] / (60 * 60 * 24 * 30 * 12),0); $lastmodify = $yars - $daystaia; if($lastmodify <= 20) { if($lastmodify==1) $days = 'год'; elseif($lastmodify==2||3||4) $days = 'года'; else $days = 'лет'; } else{echo 'Я ещё жив, прошло более 20 лет!!!';} } } if($day == $daystaia) { echo ' <div class="statia" style="border-top:1px solid #cadceb;" > <div class="opisaniestatii" > <div class="navbar2"> <span class="corners-top"><span></span></span> <h2><a href='.$domain.''.RAZDEL.'/'.$res['href'].'>'.$res['name'].'</a></h2> <span class="corners-bottom"><span></span></span> </div> <div style="padding:0px 10px "> <img class="blockimg" src="'.$domain.'article/files/'.$res['si'].'"> <br/> '.$res['opisanie'].' <a href='.$domain.''.RAZDEL.'/'.$res['href'].'>Читать далее...</a> </div> </div> <div class="opisaniestatii" style="padding-top:5%;clear:both;"> <span class="dobavleno"></span> <div class="articleinfo">Дата: '.$alldate.'</div> <span class="prosmotr"></span><div class="articleinfo">Просмотров: '.$res['count'].' </div> <span class="comment"></span><div class="articleinfo">Комментариев: '.$res['comment'].'</div> </div> </div>'; } else { echo ' <div class="statia" style="border-top:1px solid #cadceb;" > <div class="opisaniestatii" > <div class="navbar2"> <span class="corners-top"><span></span></span> <h2><a href='.$domain.''.RAZDEL.'/'.$res['href'].'>'.$res['name'].'</a></h2> <span class="corners-bottom"><span></span></span> </div> <div style="padding:0px 10px "> <img class="blockimg" src="'.$domain.'article/files/'.$res['si'].'"> <br/> '.$res['opisanie'].' <a href='.$domain.''.RAZDEL.'/'.$res['href'].'>Читать далее...</a> </div> </div> <div class="opisaniestatii" style="padding-top:5%;clear:both;"> <span class="dobavleno"></span> <div class="articleinfo">Дата: '.$lastmodify.' '.$days.' назад - '.$alldate.'</div> <span class="prosmotr"></span><div class="articleinfo">Просмотров: '.$res['count'].' </div> <span class="comment"></span><div class="articleinfo">Комментариев: '.$res['comment'].'</div> </div> </div>'; } } } ?>

Заранее Вас разочарую, в примере я вывел 11 старинц по 2 статьи, хотя в листингах указал $pages_count = ceil($count / 5);(выводить по 5 статей), - сделал я это намеренно, чтобы эффект прокрутки постарничной навигации присутсвовал. В архиве я сохранил это значение равным 5, то есть, если Вам нужно его увеличить или уменьшить, для этого измените данное занчение, как и где указнно в следующем листинге.

// в index.php измените делитель, который определяет количество данных $pages_count = ceil($count / 2); // количество данных // в ajax.php измените $perpage = 2; // Количество отображаемых данных из БД

А сейчас я Вас запутаю ещё сильнее, так как Вы будете подстраивать скрипт под собственные данные, следовательно и количество ссылок пстраничной навигации будет разным, то есть Вы нажмёте 15 но у Вас ничего не загрузится, поскольку такого контейнера нет, поэтому укажите этот контейнер. В нашем случае 12 ссылок, поэтому контейнер с id "pagedemo _current" должен содержать 12 дочерних блоков.

<div id="paginationdemo" class="demo"> <h1>Полный пример постраничной навигации</h1> <div id="p1" class="pagedemo _current" style="">Page 1</div> <div id="p2" class="pagedemo" style="display:none;">Page 2</div> <div id="p3" class="pagedemo" style="display:none;">Page 3</div> <div id="p4" class="pagedemo" style="display:none;">Page 4</div> <div id="p5" class="pagedemo" style="display:none;">Page 5</div> <div id="p6" class="pagedemo" style="display:none;">Page 6</div> <div id="p7" class="pagedemo" style="display:none;">Page 7</div> <div id="p8" class="pagedemo" style="display:none;">Page 8</div> <div id="p9" class="pagedemo" style="display:none;">Page 9</div> <div id="p10" class="pagedemo" style="display:none;">Page 10</div> <div id="p11" class="pagedemo" style="display:none;">Page 10</div> <div id="demo5"> </div> </div> </div>