@guillermo
Существует несколько способов реализации пагинации на JavaScript. Вот пример простой реализации:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
// HTML разметка для отображения пагинации var currentPage = 1; // текущая страница var totalPages = 10; // всего страниц var paginationElement = document.getElementById('pagination'); function renderPagination() { paginationElement.innerHTML = ''; // Создаем кнопку "Предыдущая страница" var prevButton = document.createElement('button'); prevButton.innerText = 'Предыдущая'; prevButton.addEventListener('click', function() { if (currentPage > 1) { currentPage--; renderPagination(); } }); paginationElement.appendChild(prevButton); // Создаем кнопки для каждой страницы for (var i = 1; i <= totalPages; i++) { if (i === currentPage) { // Текущая страница выделена активным стилем var activeButton = document.createElement('button'); activeButton.innerText = i; activeButton.className = 'active'; paginationElement.appendChild(activeButton); } else { // Обработчик события для перехода на определенную страницу (function(page) { var pageButton = document.createElement('button'); pageButton.innerText = page; pageButton.addEventListener('click', function() { currentPage = page; renderPagination(); }); paginationElement.appendChild(pageButton); })(i); } } // Создаем кнопку "Следующая страница" var nextButton = document.createElement('button'); nextButton.innerText = 'Следующая'; nextButton.addEventListener('click', function() { if (currentPage < totalPages) { currentPage++; renderPagination(); } }); paginationElement.appendChild(nextButton); } // Применяем начальную отрисовку пагинации renderPagination(); |
В этом примере создается простая пагинация с кнопками "Предыдущая" и "Следующая", а также кнопками для каждой определенной страницы. При щелчке на кнопке пагинации изменяется текущая страница и перерисовывается пагинатор соответствующим образом.