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

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

Чаще всего реализовывать постраничную навигацию мне доводилось в web-интерфейсе, то есть с помощью HTML и JavaScript, а точнее jQuery, который получает данные от PHP, работающего с базой данных напрямую.

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

Для навигации по страницам в HTML создадим кнопки с номерами страниц, я обычно использую 7 кнопок. При этом в коде объявления кнопок внутри тега <span> находится пользовательский атрибут data-v, в котором будут храниться номера страниц, атрибут id содержит порядковый номер кнопки.

Кнопок можно сделать и больше, чем 7, например 9, 11 или 13 и т. д. - всегда с шагом +2 кнопки. Для вывода полученных данных будем использовать список - тег <select>, создадим его тоже.

<p id="but"><span id="b1" data-v="" class="bt">&lt;&lt;</span> <span id="b2" data-v="" class="bt">&lt;</span> <span id="b3" data-v="" class="bt">4</span> <span id="b4" data-v="" class="bt">5</span> <span id="b5" data-v="" class="bt">6</span> <span id="b6" data-v="" class="bt">&gt;</span> <span id="b7" data-v="" class="bt">&gt;&gt;</span></p>

<select id="sel" size="20"></select>

В CSS прописываем стили для кнопок:

/* Кнопка не активной страницы */
.bt { visibility:visible; background-color: #cbffc3; cursor: pointer; padding: 3px 5px 3px 5px; font-size: 10pt; }

/* Кнопка активной страницы */
.bta { visibility:visible; background-color: #eeeeee; cursor: auto; padding: 3px 5px 3px 5px; font-size: 10pt; }

/* Кнопка скрыта */
.bti { visibility:hidden; padding: 3px 5px 3px 5px; font-size: 10pt; }

В итоге кнопки будут выглядеть так:

<< < 4 5 6 > >>

В PHP-скрипте должно быть задано количество записей для одной страницы, например 20 штук. В ответ на переданный PHP-скрипту номер активной страницы, он должен возвратить:

  • записи из базы данных соответствующие этой активной странице
  • номер активной страницы
  • общее количество страниц (учитывая, что на одной странице - 20 записей)

Далее эти данные получает Javascript и в зависимости от общего количества страниц и номера активной страницы, нам будет необходимо на кнопках делать разные надписи.

Конфигурация кнопок в постраничной навигации будет иметь 4 базовых состояния и выглядит так:

1 2 3 4 5 6 7 - всего < 8 страниц (например 7), активна любая страница (например №5)
1 2 3 4 5 > >> - всего > 7 страниц (например 8), активна страница от 1 до 4 с начала (например №4)
<< < 5 6 7 8 9 - всего > 7 страниц (например 9), активна страница от 1 до 4 с конца (например №6)
<< < 4 5 6 > >> - всего > 7 страниц (например 9), активна страница не от 1 до 4 с начала и не от 1 до 4 с конца (например №5)

Код JavaScript, который реализует эту логику:

// получим данные для 1-й страницы
spisGet(1);

// функция обработки логики 4 базовых конфигураций кнопок
function kupd(sp, ll, ac, kk, se) {
 for (i=1; i<=kk; i++) {
  // очистим кнопки
  $("#b" + i).attr("class", "bt"); $("#b" + i).attr("data-v", "");
  if (sp==1) { // заполнить кнопки в конфигурации 1
   if (i <= ll) {kn(i, i, i);}
   else {$("#b" + i).attr("class", "bti");}
   vv = ac;
  }
  if (sp==2) { // заполнить кнопки в конфигурации 2
   if (i < kk - 1) {z1 = i; z2 = i;}
   else if (i == kk - 1) {z1 = ">"; z2 = ac + 1;}
   else if (i == kk) {z1 = ">>"; z2 = ll;}
   kn(i, z1, z2); vv = ac;
  }
  if (sp==3) { // заполнить кнопки в конфигурации 3
   if (i > 2) {z1 = ll-kk+i; z2 = ll-kk+i; if (z1 == ac) {vv = i;}}
   else if (i == 1) {z1 = "<<"; z2 = 1;}
   else if (i == 2) {z1 = "<"; z2 = ac - 1;}
   kn(i, z1, z2);
  }
  if (sp==4) { // заполнить кнопки в конфигурации 4
   if (i == 1) {z1 = "<<"; z2 = 1;}
   if (i == 2) {z1 = "<"; z2 = ac - 1;}
   if (i < se && i > 2) {z1 = ac - se + i; z2 = ac - se + i;}
   if (i == se) {z1 = ac; z2 = ac;}
   if (i > se && i < kk - 1) {z1 = ac + i - se; z2 = ac + i - se;}
   if (i == kk - 1) {z1 = ">"; z2 = ac + 1;}
   if (i == kk) {z1 = ">>"; z2 = ll;}
   kn(i, z1, z2); vv = se;
  }
 }
 $("#b" + vv).attr("class", "bta"); // выделить кнопку активной страницы
}

// функция записывает новые данные для кнопки
function kn(i, z1, z2) {
 $("#b" + i).html(z1); $("#b" + i).attr("data-v", z2);
}

// функция определяет конфигурацию кнопок по номеру активной страницы и общему количеству страниц
function kmain(ll, ac) {
 kk = $("#but").children('span').length; // количество кнопок
 se = Math.round(kk/2); // номер центральной кнопки
 if (ll < kk + 1) {kupd(1, ll, ac, kk, se);}
 else {
  if (ac <= se) {kupd(2, ll, ac, kk, se);}
  else if (ac > ll-se) {kupd(3, ll, ac, kk, se);}
  else if (ac > se && ac <= ll-se) {kupd(4, ll, ac, kk, se);}
 }
}

// обработка клика по номеру страницы
$("#but").children('span').click(function(){
 ac = +$(this).attr("data-v"); // новая активная страница
 spisGet(ac);
});

// функция получает данные от PHP-скрипта по номеру страницы
function spisGet(pg) {
  $.ajax({
    type: 'POST',
    url: 'https://site.ru/view.php',
    data: 'p=' + pg,
    success: function(data){ 
	 updSpis(data);
    }
  });
}

// функция обновляет содержимое списка select и постраничную навигацию
function updSpis(data) {
 t = data.indexOf('%');
 if (t != -1 ) { // если пришел нормальный ответ от сервера
  var ss = data.split('%');
  st = ss[0].split('$');
  kmain(+st[1],+st[0]); // изменить постраничную навигацию
  var opts = '';
  for(var i=1; i<ss.length; i++) {
   opts += '<option value="' + ss[i] + '">' + '№' + ss[i] + '</option>';
  }
  $("#sel").html(opts); // заполнить список select
 }
}

Ниже представлен пример, демонстрирующий постраничную навигацию, которая получилась в итоге. В примере можно выбрать общее количество страниц и кликая по кнопкам проверить поведение программы.

Всего страниц:

<< < 4 5 6 > >>

Поделиться статьей:  

Читайте также статьи из ITИнтернет технологии:

Поделитесь своим мнением

Правила сообщений

Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Хороший отзыв
Разумно · Дельно · Опытно · Идейно
Яндекс.Метрика
© 2016 - 2024 Хороший отзыв · Разумно · Дельно · Опытно · Идейно