Slyweb
На разработку сайта! Скидки 50%!

jPaginate - плагин для постраничной навигации на jQuery

jQuery и jPaginate

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

Загрузить архивом плагин jQuery "jPaginate" для постраничного вывода данных".

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

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

HTML структура

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

  • Код
  • Чистый код
  1. <div class="demo">
  2. <h1>Пример постраничной навигации</h1>
  3. <div id="demo1">
  4. </div>
  5. </div>
  6.

        

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

  • Код
  • Чистый код
  1.$(function() {
  2. $("#demo1").paginate({
  3. count : 100,
  4. start : 1,
  5. display : 8,
  6. border : true,
  7. border_color : '#fff',
  8. text_color : '#fff',
  9. background_color : 'black',
10. border_hover_color : '#ccc',
11. text_hover_color : '#000',
12. background_hover_color : '#fff',
13. images : false,
14. mouse : 'press'
15. });
16. });
17.

        

Пример постраничной навигации

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

  • Код
  • Чистый код
  1.$(function() {
  2. $("#demo5").paginate({
  3. count : 10,
  4. start : 1,
  5. display : 7,
  6. border : true,
  7. border_color : '#fff',
  8. text_color : '#fff',
  9. background_color : 'black',
10. border_hover_color : '#ccc',
11. text_hover_color : '#000',
12. background_hover_color : '#fff',
13. images : false,
14. mouse : 'press',
15. onChange : function(page){
16. $('._current','#paginationdemo').removeClass('_current').hide();
17. $('#p'+page).addClass('_current').show();
18. }
19. });
20. });
21.

        

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

  • Код
  • Чистый код
  1. <div id="paginationdemo" class="demo">
  2. <h1>Demo 5</h1>
  3. <div id="p1" class="pagedemo _current" style="">Page 1</div>
  4. <div id="p2" class="pagedemo" style="display:none;">Page 2</div>
  5. <div id="p3" class="pagedemo" style="display:none;">Page 3</div>
  6. <div id="p4" class="pagedemo" style="display:none;">Page 4</div>
  7. <div id="p5" class="pagedemo" style="display:none;">Page 5</div>
  8. <div id="p6" class="pagedemo" style="display:none;">Page 6</div>
  9. <div id="p7" class="pagedemo" style="display:none;">Page 7</div>
10. <div id="p8" class="pagedemo" style="display:none;">Page 8</div>
11. <div id="p9" class="pagedemo" style="display:none;">Page 9</div>
12. <div id="p10" class="pagedemo" style="display:none;">Page 10</div>
13. <div id="demo5">
14. </div>
15. </div>
16.

        

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

  • Код
  • Чистый код
  1.<?php
  2.//////////////////////////////////////////////////////////////////////////////////////////\
  3.
  4.class jPaginateajax {
  5.
  6. private $mMysqli;
  7.
  8. // подключаемся к базе данных
  9. function __construct()
10. {
11. // connect to the database
12. $this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASS,DB_DATABASES);
13. }
14.
15. // отключаемся от базы данных
16. function __destruct()
17. {
18. $this->mMysqli->close();
19. }
20.
21. function yandex_link_bar()
22. {
23.
24. // Подключение к базе данных
25. $this->mMysqli->query("SET NAMES 'utf8'");
26. $this->mMysqli->query("SET CHARACTER SET 'utf8'");
27. $query = "SELECT * FROM `statii` WHERE razdel='jquery' ORDER BY time DESC";
28. // Общее количество информации
29. $count = $this->mMysqli->query($query)->num_rows;
30.
31. $pages_count = ceil($count / 5); // Количество страниц
32. // Если номер страницы оказался больше количества страниц
33. if ($page > $pages_count) $page = $pages_count;
34. $start_pos = ($page - 1) * $perpage; // Начальная позиция, для запроса к БД
35. // Вызов функции, для вывода ссылок на экран
36.
37.
38. echo '
39. <script type="text/javascript">
40. $("#demo5").paginate({
41. count : '.$pages_count.',
42. start : 1,
43. display : 7,
44. border : true,
45. border_color : '#fff',
46. text_color : '#fff',
47. background_color : 'black',
48. border_hover_color : '#ccc',
49. text_hover_color : '#000',
50. background_hover_color : '#fff',
51. images : false,
52. mouse : 'press',
53. onChange : function(page){
54. $('._current','#paginationdemo').removeClass('_current').hide();
55. $('#p'+page).load('ajax.php','id='+page,function(){
56.
57. $('#p'+page).addClass('_current').show();
58. });
59.
60.
61. }
62. });
63.
64. </script>
65. ';
66. } // Конец функции
67.
68.
69.
70.
71.
72.
73.
74.
75.}
76.
77.
78.
79.$jpaginateajax = new jPaginateajax();
80.$jpaginateajax ->yandex_link_bar();
81.?>
82.

        

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

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

Page 1

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

  • Код
  • Чистый код
  1.<?php
  2.require_once $_SERVER['DOCUMENT_ROOT'].'/config.php';
  3.define('RAZDEL','jquery');
  4.// Подключение к базе данных
  5.$conection = mysql_connect("localhost","$user","$pass");
  6.$db = mysql_select_db("$dbs", $conection)
  7.or die('Ошибка:'.mysql_error());
  8.mysql_query("SET NAMES 'utf8'");
  9.mysql_query("SET CHARACTER SET 'utf8'");
10.// Подготовка к постраничному выводу
11.
12.$page = $_GET['id'];
13.
14.$perpage = 5; // Количество отображаемых данных из БД
15.if (empty($page) || ($page <= 0)) {
16.$page = 1;
17.} else {
18.$page = (int) $page; // Считывание текущей страницы
19.}
20.// Общее количество информации
21.if(isset($_SESSION['sort'])){
22.if($_SESSION['sort']=="sort1")
23.{
24.
25.$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"));
26.}
27.elseif($_SESSION['sort']=="sort2")
28.{
29.$count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY comment DESC"));
30.}
31.elseif($_SESSION['sort']=="sort3")
32.{
33.$count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC"));
34.}
35.elseif($_SESSION['sort']=="sort4")
36.{
37.$count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY count DESC"));
38.}
39.}
40.else
41.{
42.$count = mysql_numrows(mysql_query("SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC"));
43.}
44.$pages_count = ceil($count / $perpage); // Количество страниц
45.// Если номер страницы оказался больше количества страниц
46.if ($page > $pages_count) $page = $pages_count;
47.$start_pos = ($page - 1) * $perpage; // Начальная позиция, для запроса к БД
48.// Вызов функции, для вывода ссылок на экран
49.
50.
51.
52.
53.$conection = mysql_connect("localhost","$user","$pass");
54.$db = mysql_select_db("$dbs", $conection)
55.or die('Ошибка:'.mysql_error());
56.mysql_query("SET NAMES 'utf8'");
57.mysql_query("SET CHARACTER SET 'utf8'");
58.if(isset($_SESSION['sort'])){
59.if($_SESSION['sort']=="sort1")
60.{
61.$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;
62.}
63.elseif($_SESSION['sort']=="sort2")
64.{
65.$query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY comment DESC LIMIT ".$start_pos.', '.$perpage;
66.}
67.elseif($_SESSION['sort']=="sort3")
68.{
69.$query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC LIMIT ".$start_pos.', '.$perpage;
70.}
71.elseif($_SESSION['sort']=="sort4")
72.{
73.$query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY count DESC LIMIT ".$start_pos.', '.$perpage;
74.}
75.}
76.else
77.{
78.$query = "SELECT * FROM `statii` WHERE razdel='".RAZDEL."' ORDER BY time DESC LIMIT ".$start_pos.', '.$perpage;
79.}
80.$result = mysql_query($query);
81.$time = time();
82.$day = round($time / (60 * 60 * 24),0);
83.$month = round($time / (60 * 60 * 24 * 30),0);
84.$yars = round($time / (60 * 60 * 24 * 30 * 12),0);
85.if($result)
86.{
87.
88. while($res = mysql_fetch_assoc($result))
89. {
90.
91. $alldate = date('Y.m.d',$res['time']);
92. $daystaia = round($res['time'] / (60 * 60 * 24),0);
93. $lastmodify = $day - $daystaia;
94. if($lastmodify <= 31)
95. {
96. if($lastmodify==1) $days = 'день';
97. elseif($lastmodify == 2 || $lastmodify==3 || $lastmodify==4) $days = 'дня';
98. else $days = 'дней';
99. }
100. else
101. {
102. $daystaia = round($res['time'] / (60 * 60 * 24 * 30),0);
103. $lastmodify = $month - $daystaia;
104. if($lastmodify <= 12)
105. {
106. if($lastmodify==1) $days = 'месяц';
107. elseif($lastmodify==2 || $lastmodify==3 || $lastmodify==4) $days = 'месяца';
108. else $days = 'месяцев';
109. }
110. else
111. {
112. $daystaia = round($res['time'] / (60 * 60 * 24 * 30 * 12),0);
113. $lastmodify = $yars - $daystaia;
114. if($lastmodify <= 20)
115. {
116. if($lastmodify==1) $days = 'год';
117. elseif($lastmodify==2||3||4) $days = 'года';
118. else $days = 'лет';
119. }
120. else{echo 'Я ещё жив, прошло более 20 лет!!!';}
121. }
122. }
123. if($day == $daystaia)
124. {
125. echo '
126. <div class="statia" style="border-top:1px solid #cadceb;" >
127.
128. <div class="opisaniestatii" >
129.
130. <div class="navbar2">
131. <span class="corners-top"><span></span></span>
132. <h2><a href='.$domain.''.RAZDEL.'/'.$res['href'].'>'.$res['name'].'</a></h2>
133. <span class="corners-bottom"><span></span></span>
134. </div>
135.
136. <div style="padding:0px 10px ">
137. <img class="blockimg" src="'.$domain.'article/files/'.$res['si'].'">
138. <br/>
139. '.$res['opisanie'].' <a href='.$domain.''.RAZDEL.'/'.$res['href'].'>Читать далее...</a>
140. </div>
141.
142. </div>
143.
144.
145. <div class="opisaniestatii" style="padding-top:5%;clear:both;">
146. <span class="dobavleno"></span>
147. <div class="articleinfo">Дата: '.$alldate.'</div>
148. <span class="prosmotr"></span><div class="articleinfo">Просмотров: '.$res['count'].' </div>
149. <span class="comment"></span><div class="articleinfo">Комментариев: '.$res['comment'].'</div>
150. </div>
151.
152.
153. </div>';
154. }
155. else {
156. echo '
157. <div class="statia" style="border-top:1px solid #cadceb;" >
158.
159. <div class="opisaniestatii" >
160.
161. <div class="navbar2">
162. <span class="corners-top"><span></span></span>
163. <h2><a href='.$domain.''.RAZDEL.'/'.$res['href'].'>'.$res['name'].'</a></h2>
164. <span class="corners-bottom"><span></span></span>
165. </div>
166.
167. <div style="padding:0px 10px ">
168. <img class="blockimg" src="'.$domain.'article/files/'.$res['si'].'">
169. <br/>
170. '.$res['opisanie'].' <a href='.$domain.''.RAZDEL.'/'.$res['href'].'>Читать далее...</a>
171. </div>
172.
173. </div>
174.
175.
176. <div class="opisaniestatii" style="padding-top:5%;clear:both;">
177. <span class="dobavleno"></span>
178. <div class="articleinfo">Дата: '.$lastmodify.' '.$days.' назад - '.$alldate.'</div>
179. <span class="prosmotr"></span><div class="articleinfo">Просмотров: '.$res['count'].' </div>
180. <span class="comment"></span><div class="articleinfo">Комментариев: '.$res['comment'].'</div>
181. </div>
182.
183.
184. </div>';
185. }
186.
187. }
188.}
189.?>
190.

        

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

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

        

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

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

        

Загрузить архивом плагин jQuery "jPaginate" для постраничного вывода данных".


Александр Ермаков