2

Нужна простейшая пагинация, которая примерно работает так:

Всего на странице (допустим) 48 элементов, каждые 16 элементов это 1 страница, тоесть , тоесть все остальные 32 элемента должны быть display:none. Ну и переключатели среди страниц. При переходу на вторую страницу - первые 16 элементов скрываются, и показываются следующие 16 и тд.

Облазил весь интернет, нужную библиотеку не нашел, как реализовать не знаю.

5
  • 1
    По логике работы это табы или аккордеон. Реализуется, например, при помощи jqueryui.com/tabs или getbootstrap.com/javascript/#tabs или вообще пишется небольшой скрипт за полчаса. Что именно вы не смогли найти? Commented 14 авг. 2016 в 14:16
  • Надо реализовать желательно не использовав другие библиотеки, как подобное реализовать - понятия не имею
    – stoner
    Commented 14 авг. 2016 в 14:20
  • "желательно не использовав другие библиотеки" несколько противоречит "нужную библиотеку не нашел". На JS писать умеете? С какими проблемами вы столкнулись? Commented 14 авг. 2016 в 14:22
  • Вот именно что возникает трудность - что написать самому проблемно. На что уйдет очень много времени. А про библиотеки я имею ввиду что нехочу с ними ковыряться 4 часа чтобы придти к правильному решению
    – stoner
    Commented 14 авг. 2016 в 14:23
  • Есть следующий код: jsfiddle.net/0vmevttt - нашел его в старых скриптах, там вроде работает все как надо, как его правильно реализовать?
    – stoner
    Commented 14 авг. 2016 в 14:49

1 ответ 1

7

Велосипед - не знаю, но можно попробовать так.

var count = 10; //всего записей
var cnt = 5; //сколько отображаем сначала
var cnt_page = Math.ceil(count / cnt); //кол-во страниц

//выводим список страниц
var paginator = document.querySelector(".paginator");
var page = "";
for (var i = 0; i < cnt_page; i++) {
  page += "<span data-page=" + i * cnt + "  id=\"page" + (i + 1) + "\">" + (i + 1) + "</span>";
}
paginator.innerHTML = page;

//выводим первые записи {cnt}
var div_num = document.querySelectorAll(".num");
for (var i = 0; i < div_num.length; i++) {
  if (i < cnt) {
    div_num[i].style.display = "block";
  }
}

var main_page = document.getElementById("page1");
main_page.classList.add("paginator_active");

//листаем
function pagination(event) {
  var e = event || window.event;
  var target = e.target;
  var id = target.id;
  
  if (target.tagName.toLowerCase() != "span") return;
  
  var num_ = id.substr(4);
  var data_page = +target.dataset.page;
  main_page.classList.remove("paginator_active");
  main_page = document.getElementById(id);
  main_page.classList.add("paginator_active");

  var j = 0;
  for (var i = 0; i < div_num.length; i++) {
    var data_num = div_num[i].dataset.num;
    if (data_num <= data_page || data_num >= data_page)
      div_num[i].style.display = "none";

  }
  for (var i = data_page; i < div_num.length; i++) {
    if (j >= cnt) break;
    div_num[i].style.display = "block";
    j++;
  }
}
.num {
  display: none;
}
.paginator {
  line-height: 150%;
}
.paginator > span {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}
.paginator_active {
  color: red;
}
Блоки:
<div class="page">
  <div data-num=1 class="num">1</div>
  <div data-num=2 class="num">2</div>
  <div data-num=3 class="num">3</div>
  <div data-num=4 class="num">4</div>
  <div data-num=5 class="num">5</div>
  <div data-num=6 class="num">6</div>
  <div data-num=7 class="num">7</div>
  <div data-num=8 class="num">8</div>
  <div data-num=9 class="num">9</div>
  <div data-num=10 class="num">10</div>
</div>
Страницы:
<div class="paginator" onclick="pagination(event)"></div>

5
  • все идеально, но как стилизовать переключатель - допустим чтобы "активная" страница как-то помечалась. Типо чтобы было видно что я нахожусь допустим на второй странице.
    – stoner
    Commented 14 авг. 2016 в 15:30
  • @kiLLro, изменил код
    – Amandi
    Commented 14 авг. 2016 в 15:39
  • Первые 5-6 секунд работает нормально, а потом выдает ошибку в консоль 'Uncaught TypeError: Cannot read property 'classList' of null' дважды и перестет работать.
    – stoner
    Commented 14 авг. 2016 в 15:48
  • @kiLLro исправил
    – Amandi
    Commented 14 авг. 2016 в 15:54
  • Работает, спасибо. Если найдется время - можно ли сделать кнопки по крям, типо переключить на след/предыдущую. Заранее огромнейшее тебе спасибо, оочень выручил!
    – stoner
    Commented 14 авг. 2016 в 16:09

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.