We need the simplest pagination, which roughly works like this:

There are 48 elements on the page (let's say), every 16 elements is 1 page, that is, all the other 32 elements should be display:none . Well, the switches among the pages. When moving to the second page - the first 16 elements are hidden, and the next 16 and so on are shown.

Climbed the entire Internet, I did not find the necessary library, I do not know how to implement it.

  • According to the logic of the work is tabs or accordion. It is implemented, for example, using jqueryui.com/tabs or getbootstrap.com/javascript/#tabs, or a small script is written in half an hour. What exactly you could not find? - tutankhamun
  • It is necessary to implement it is desirable without using other libraries, how to implement such a thing - I have no idea - stoner
  • "preferably without using other libraries" somewhat contradicts "the required library could not be found." Can you write JS? What problems have you encountered? - tutankhamun
  • That's exactly what a difficulty arises - what to write yourself is a problem. It will take a lot of time. And as for libraries, I mean that I don’t want to poke around 4 hours with them to come to the right decision - stoner
  • There is the following code: jsfiddle.net/0vmevttt - found it in old scripts, everything seems to work as it should, how to implement it correctly? - stoner

1 answer 1

Bike - I do not know, but you can try it.

 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>

  • Everything is perfect, but how to style the switch - let's say that the "active" page is somehow marked. Tipo to make it clear that I am admissible on the second page. - stoner
  • @kiLLro, changed the code - Amandi
  • The first 5-6 seconds it works fine, and then it gives an error in the console 'Uncaught TypeError: Cannot read property' classList 'of null' twice and stops working. - stoner
  • @kiLLro fixed - Amandi
  • It works, thanks. If there is time - is it possible to make the buttons by cracks, it is supposed to switch to the next / previous track. Thank you very much in advance, oochen helped out! - stoner