Как создать пагинацию с многоточием?

Для создания пагинации с многоточием в JavaScript есть несколько подходов. Один из наиболее распространенных способов - использование алгоритма, который определяет, нужно ли показывать многоточие и какие страницы следует отображать в пагинации.

Вот пример реализации пагинации с многоточием:

function createPagination(totalPages, currentPage) {
  const maxVisiblePages = 5; // Максимальное количество видимых страниц до и после текущей страницы
  const ellipsis = '...';
  let pagination = '';

  // Проверяем, нужно ли показывать многоточие в начале
  if (currentPage > maxVisiblePages) {
    pagination += `<a class="page-link" href="#">1</a>`; // Первая страница всегда видна
    pagination += `<span class="ellipsis">${ellipsis}</span>`;
  }

  // Проверяем, нужно ли показывать многоточие в середине
  const startPage = Math.max(1, currentPage - maxVisiblePages); // Начальная страница для отображения
  const endPage = Math.min(totalPages, currentPage + maxVisiblePages); // Конечная страница для отображения
  if (startPage > 1) {
    pagination += `<span class="ellipsis">${ellipsis}</span>`;
  }
  
  // Отображаем страницы в пагинации
  for (let page = startPage; page <= endPage; page++) {
    if (page === currentPage) {
      pagination += `<a class="page-link active" href="#">${page}</a>`; // Если это текущая страница, добавляем класс активности
    } else {
      pagination += `<a class="page-link" href="#">${page}</a>`;
    }
  }

  // Проверяем, нужно ли показывать многоточие в конце
  if (endPage < totalPages) {
    pagination += `<span class="ellipsis">${ellipsis}</span>`;
    pagination += `<a class="page-link" href="#">${totalPages}</a>`; // Последняя страница всегда видна
  }

  return pagination;
}

// Пример использования
const totalPages = 10;
const currentPage = 5;
const pagination = createPagination(totalPages, currentPage);

// Выводим пагинацию в HTML
const paginationContainer = document.getElementById('pagination');
paginationContainer.innerHTML = pagination;

В этом примере мы создали функцию createPagination с двумя параметрами: totalPages (количество страниц) и currentPage (текущая страница). Мы установили maxVisiblePages равным 5, чтобы отобразить максимум 5 страниц до и после текущей страницы.

Затем мы проверяем, нужно ли показывать многоточие в начале и в конце пагинации, добавляя элементы с классом ellipsis. Далее мы отображаем страницы пагинации, создавая ссылки с классом page-link, и добавляем класс active для текущей страницы.

Наконец, мы выводим сгенерированную пагинацию в указанный HTML-контейнер с помощью метода innerHTML.

Обратите внимание, что в данном примере я использовал простой HTML-форматированный вывод. Вы можете стилизовать и настроить пагинацию согласно вашим потребностям и используемому фреймворку или библиотеке.