Показать больше с помощью JavaScript

< xmp >// Массив данных, которые мы хотим отобразить
const data = [
  "Запись 1",
  "Запись 2",
  "Запись 3",
  "Запись 4",
  "Запись 5",
  "Запись 6",
  // и так далее...
];

// Функция, которая отображает данные на странице
function displayData(page, pageSize) {
  const startIndex = (page - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  
  const currentPageData = data.slice(startIndex, endIndex);
  
  // Отображаем данные на странице, например, в виде списка элементов
  const listElement = document.getElementById("data-list");
  listElement.innerHTML = "";
  
  currentPageData.forEach(item => {
    const listItem = document.createElement("li");
    listItem.innerText = item;
    listElement.appendChild(listItem);
  });
}

// Функция для обработки нажатий на кнопки пагинации
function handlePageClick(page) {
  const pageSize = 3; // Количество записей на странице
  
  displayData(page, pageSize);
}

// Добавляем кнопки пагинации на страницу
function addPaginationButtons() {
  const totalPages = Math.ceil(data.length / 3); // Всего страниц
  
  const paginationContainer = document.getElementById("pagination");
  paginationContainer.innerHTML = "";
  
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement("button");
    button.innerText = i;
    
    button.addEventListener("click", () => handlePageClick(i));
    
    paginationContainer.appendChild(button);
  }
}

// Инициализируем отображение данных на первой странице
displayData(1, 3);
// Добавляем кнопки пагинации
addPaginationButtons();< / xmp >