@AndreyKuz
Интеграция сайта с 1с

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

На одной странице выводится несколько секций
для каждой секции нужно сделать свою независимую пагинацию на 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 знаком, удавалось сделать пагинацию для одного массива на странице,подскажите
как решить эту задачу.Видимо нужен массив массивов, как правильно это сделать в данной задаче?
  • Вопрос задан
  • 110 просмотров
Решения вопроса 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.
При клике на кнопку отображаются элементы, соответствующие выбранной странице. Вроде ничего не упустил.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы