Как сделать пагинацию на js для нескольких независимых секций на странице?

Question

[Андрей Кузнецов]

На одной странице выводится несколько секций
для каждой секции нужно сделать свою независимую пагинацию на js,
css-классы одинаковые пример разметки

<div class="wrap_item"> Обертка секции
	<h3 class="title_heading">Секция №1</h3> Уникальное имя секции
	<div class="wrap_elements">Обертка элементов
		<div class="class_element">
			Содержимое - имя элемента 
		</div>									
	</div>
	<div>Здесь нужна пагинация для элементов секции №1</div>
</div> 

<div class="wrap_item"> Обертка секции
	<h3 class="title_heading">Секция №2</h3> Уникальное имя секции
	<div class="wrap_elements">Обертка элементов
		<div class="class_element">
			Содержимое - имя элемента 
		</div>									
	</div>
	<div>Здесь нужна пагинация для элементов секции №2</div>
</div>

<div class="wrap_item"> Обертка секции
	<h3 class="title_heading">Секция №3</h3> Уникальное имя секции
	<div class="wrap_elements">Обертка элементов
		<div class="class_element">
			Содержимое - имя элемента 
		</div>									
	</div>
	<div>Здесь нужна пагинация для элементов секции №3</div>
</div>

С js знаком, удавалось сделать пагинацию для одного массива на странице,подскажите
как решить эту задачу.Видимо нужен массив массивов, как правильно это сделать в данной задаче?

Comments

[szQocks]

где код который ты писал ? добавь в вопрос, может допишет кто-то тебе его, и кнопки добавь

Answer 1

[Вадим Освальд]

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

<div class="wrap_item" data-section="1">
  <h3 class="title_heading">Секция №1</h3>
  <div class="wrap_elements">
    <div class="class_element">Элемент 1</div>
    <div class="class_element">Элемент 2</div>
    <div class="class_element">Элемент 3</div>
    <div class="class_element">Элемент 4</div>
    <div class="class_element">Элемент 5</div>
  </div>
  <div class="pagination"></div>
</div>

<div class="wrap_item" data-section="2">
  <h3 class="title_heading">Секция №2</h3>
  <div class="wrap_elements">
    <div class="class_element">Элемент A</div>
    <div class="class_element">Элемент B</div>
    <div class="class_element">Элемент C</div>
    <div class="class_element">Элемент D</div>
    <div class="class_element">Элемент E</div>
  </div>
  <div class="pagination"></div>
</div>

<div class="wrap_item" data-section="3">
  <h3 class="title_heading">Секция №3</h3>
  <div class="wrap_elements">
    <div class="class_element">Элемент α</div>
    <div class="class_element">Элемент β</div>
    <div class="class_element">Элемент γ</div>
    <div class="class_element">Элемент δ</div>
    <div class="class_element">Элемент ε</div>
  </div>
  <div class="pagination"></div>
</div>

document.addEventListener('DOMContentLoaded', () => {

    const itemsPerPage = 2;

    document.querySelectorAll('.wrap_item').forEach((section) => {
      const wrapElements = section.querySelector('.wrap_elements');
      const elements = Array.from(wrapElements.children);
      const paginationContainer = section.querySelector('.pagination');
      const totalPages = Math.ceil(elements.length / itemsPerPage);

      function showPage(page) {
        elements.forEach((el, index) => {
          el.style.display =
            index >= (page - 1) * itemsPerPage && index < page * itemsPerPage
              ? ''
              : 'none';
        });
      }

      function createPagination() {
        paginationContainer.innerHTML = ''; // очистили контейнер пагинации
        for (let i = 1; i <= totalPages; i++) {
          const button = document.createElement('button');
          button.textContent = i;
          button.addEventListener('click', () => {
            showPage(i);
            updateActiveButton(i);
          });
          paginationContainer.appendChild(button);
        }
        updateActiveButton(1); 
      }

      function updateActiveButton(activePage) {
        paginationContainer.querySelectorAll('button').forEach((btn, index) => {
          btn.classList.toggle('active', index + 1 === activePage);
        });
      }

      showPage(1);
      createPagination();
    });
  });

.wrap_elements {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .class_element {
    padding: 10px;
    border: 1px solid #ccc;
    background: #f5f5f5;
  }

  .pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    border: none;
    background: #ddd;
    cursor: pointer;
  }

  .pagination button.active {
    background: #ff6f61;
    color: #fff;
  }

Теперь имеем что? Каждый .wrap_item обрабатывается отдельно, кайф. Все дочерние элементы .class_element собираются в массив, ну красота. Style.display для скрытия/показа элементов в зависимости от текущей страницы.
Количество кнопок определяется totalPages.
При клике на кнопку отображаются элементы, соответствующие выбранной странице. Вроде ничего не упустил.

Comments

[Андрей Кузнецов]

Благодарю, отличный код!