Для создания пагинации с многоточием в 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-форматированный вывод. Вы можете стилизовать и настроить пагинацию согласно вашим потребностям и используемому фреймворку или библиотеке.