Как устроен принцип работы пагинации?

Question

Видел много примеров пагинации на CSS или JS. Некоторые говорят, что пагинацию делают чисто на php, но я запутался, помогите разобраться.

Какой язык/языки нужны для пагинации страниц на сайте? И как вообще устроен принцип работы пагинации? Допустим есть 5 кнопок переключения:

Это ссылки на другие страницы HTML? То есть, нужно cделать 5 разных html страниц с контентом и давать на них ссылку в панели переключения?(Она на картинке)

Я правильно ли все понимаю?

Answer 1

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

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

Начинается всё с того, что есть какая-то база данных, в которой хранятся записи о карточках.
Я сохраню её в переменной _BD, от неё мы будем отталкиваться.
Далее всё по комментариям в коде.

const _BD = [ // Условные записи в БД
  {title: 'Карточка 1', img: '//via.placeholder.com/150?text=1'},
  {title: 'Карточка 2', img: '//via.placeholder.com/150?text=2'},
  {title: 'Карточка 3', img: '//via.placeholder.com/150?text=3'},
  {title: 'Карточка 4', img: '//via.placeholder.com/150?text=4'},
  {title: 'Карточка 5', img: '//via.placeholder.com/150?text=5'},
  {title: 'Карточка 6', img: '//via.placeholder.com/150?text=6'},
  {title: 'Карточка 7', img: '//via.placeholder.com/150?text=7'},
];

// Для начала определимся с тем, сколько записей на странице будет выводится
const items = 3;

// Так же нам нужен параметр, по которому мы будет определять какой порядковый номер страницы будет отображаться в данный момент, этот параметр будет изменятся
let current_page = 0; // т.к. отсчёт с нуля.

// 1. Нужно разбить данные на страницы.
let pages = SplitPages(_BD, items); // функции вынес в самый низ, онисание там

/*
  В целом на этом моменте пагинация готова :)
  Всё что нужно это вывести её конкретную часть данных на страницу (current_page).
  И дать возможность менять страницы (сама пагинация).
*/

// 2. Первый рендер
let content = document.querySelector('#content'),
    pagination = document.querySelector('#pagination');

RenderPage(content, pages[current_page]);
RenderPagination(pagination, pages, current_page);

// 3. Оживляем переключение

pagination.addEventListener('click', function(e) {
  let target = e.target.closest('.link');
  
  if(target) {
    let page = +target.getAttribute('data-page'); // Получаем ID новой страницы
    
    current_page = page; // Перезаписываем значение текущей страницы
    
    // И делаем перерендер
    RenderPage(content, pages[current_page]);
    RenderPagination(pagination, pages, current_page);
  }
});



// ----- ФУНКЦИИ -----

// Функция в которой разбиваем массив на части
function SplitPages(array, len) {
  let pages = []; // этот массив мы будем заполнять частями
  let part = 0; // определяет следующую часть
  for(let i = 0; i <= Math.floor(array.length / len); i++) { // Получаем количество частей и проходим циклом
    pages.push(array.slice(part, part + len)); // вытаскиваем часть из массива при помощи .slice и добавляем в массив pages
    part += len;
  }
  return pages; // Возвращаем готовый массив с частями.
}

// Рендер страницы
function RenderPage(parent, items) {
  parent.innerHTML = ''; // Очищаем контент от кода
  
  // создаём карточки
  for(let i = 0; i < items.length; i++) { // Проходим странице и выводим карточки
    // создаём тело карточки
    let card = document.createElement('div');
    card.classList.add('card');
    
    // картинку
    let img = document.createElement('img');
    img.classList.add('image');
    img.src = items[i].img;
    card.append(img);
    
    // Описание
    let title = document.createElement('div');
    title.classList.add('title');
    title.innerText = items[i].title;
    card.append(title);
    
    // Выводим карточку в контент
    parent.append(card);
  }
}

// Рендер пагинации
function RenderPagination(parent, pages, current) {
  parent.innerHTML = ''; // Очищаем блок
  
  // Создаём "ссылки" на страницы
  // i будет своеобразным идентификатором (ID)
  for(let i = 0; i < pages.length; i++) {
    let item = document.createElement('span');
    item.classList.add('link');
    // Если ID равен текущей странице, то выделяем ссылку
    if(i === current) item.classList.add('active');
    // Идентификатор будем хранить в аттрибуте. Обычно его задают странице параметром, типо site.com/news?page=ID
    item.setAttribute('data-page', i)
    item.innerText = i + 1; // Выводим номер страницы
    
    parent.append(item);
  }
}

body {font-family: sans-serif;}

#content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin-bottom: 10px;
}

.card {
  display: block;
  width: 100%;
  border-radius: 5px;
  border: 2px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

.image {
  display: block;
  width: 100%;
  margin-bottom: 5px;
}

.title {
  display: block;
  text-align: center;
}

#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 90%;
}

.link {
  display: inline-block;
  min-width: 25px;
  height: 25px;
  line-height: 15px;
  padding: 5px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}

.active {
  border-radius: 5px;
  background-color: #ccc;
}

<div id="content"></div>
<div id="pagination"></div>

Ещё раз повторюсь - это простой пример работы пагинации, только для ознакомления.

БЛОГ НА HUSL

Как устроен принцип работы пагинации?

Ответы (1 шт):