Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2020, 19:45
Интересующийся
Отправить личное сообщение для orloff Посмотреть профиль Найти все сообщения от orloff
 
Регистрация: 30.10.2020
Сообщений: 14

Пагинация на JS
Всем привет - навалял свою пагинацию на основе стилей бутстрап.
Вроде все работает - но есть просьба - прошу покритиковать мой код со всех точек зрения, кроме того что я использовал jQuery в 2020 году )

class Pagination {
		quantityPage = 0; // Кол-во страниц
		currentPage = 1; // Текущая страница
		constructor(wrap) {
			this.wrap = wrap; // Обертка пагинации для текущего экземпляра
			this.init();
		}
		init() {
			$(document).on('click', this.wrap + ' .pagePag a', this.clickPage.bind(this));
			$(document).on('click', this.wrap + ' ul li:first-child a', this.clickPrev.bind(this));
			$(document).on('click', this.wrap + ' ul li:last-child a', this.clickNext.bind(this));
		}
		// Сеттер - смена кол-ва страниц и новый рендеринг пагинации
		setQuantityPage(val) {
			this.quantityPage = val;
			this.currentPage = 1;
			this.renderPag();
		}
		// Клик назад 
		clickPrev(e) {
			e.preventDefault();
			if (this.currentPage > 1) {
				this.currentPage--;
				$(this.wrap + ' .pagePag').removeClass('active');
				$(this.wrap + ' .pagePag a[data-page="' + this.currentPage + '"]').parent().addClass('active');
				this.checkCurrentPage();
				this.sendServer();
			}
		}
		// Клик вперед
		clickNext(e) {
			e.preventDefault();
			if (this.currentPage != this.quantityPage) {
				this.currentPage++;
				$(this.wrap + ' .pagePag').removeClass('active');
				$(this.wrap + ' .pagePag a[data-page="' + this.currentPage + '"]').parent().addClass('active');
				this.checkCurrentPage();
				this.sendServer();
			}
		}
		clickPage(e) {
			e.preventDefault();
			const dataPage = $(e.target).attr('data-page');
			if (this.currentPage != dataPage) {
				$(this.wrap + ' .pagePag').removeClass('active');
				$(e.target).parent().addClass('active');
				this.currentPage = dataPage;
				this.checkCurrentPage();
				this.sendServer();
			}
		}
		// Проверка и отклчючение Вперед Назад
		checkCurrentPage() {
			if (this.currentPage == 1) {
				$(this.wrap + ' ul li:first-child').addClass('disabled');
			} else {
				$(this.wrap + ' ul li:first-child').removeClass('disabled');
			}
			if (this.currentPage == this.quantityPage) {
				$(this.wrap + ' ul li:last-child').addClass('disabled');
			} else {
				$(this.wrap + ' ul li:last-child').removeClass('disabled');
			}
		}
		sendServer() {
			console.log('Отправляем на сервер номер страницы', this.currentPage);
		}
		// Рендерим при первом запуске или при смене количества страниц
		renderPag() {
			if (this.quantityPage) {
				let html = `<li class="page-item">
									<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Назад</a>
							</li>`;
				for (let i = 0; i < this.quantityPage; i++) {
					html += `<li class="page-item pagePag ${i < 1 ? 'active' : ''}"><a class="page-link" href="#" data-page="${i + 1}">${i + 1}</a></li>`;
				}
				let disable = this.quantityPage < 2 ? 'disabled' : '';
				html += `<li class="page-item ${disable}">
								<a class="page-link" href="#">Вперед</a>
						</li>`;
				$(this.wrap + ' ul').html(html).css('display', 'block');
			} else {
				$(this.wrap).css('display', 'none');
			}
		}
	}

	const pagination = new Pagination('#pagMaterial');
// Устанавливаем через сеттер кол-во страниц которые пришли с сервера
	pagination.setQuantityPage(7);
// Меняем кол-во страниц для теста
	$('.test').click(function () {
		pagination.setQuantityPage(4);
	});


<nav aria-label="Page navigation" id="pagMaterial">
    <ul class="pagination justify-content-center">

    </ul>
</nav>
<button type="button" class="btn btn-primary test">Test</button>
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2020, 20:51
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Зачем у кнопки Назад устанавливаете
aria-disabled="true"
И потом нигде не убираете и у других кнопок не устанавливаете?
Если уж использовать арии, то везде, где положено.

Ну и такой вопрос. А если страниц будет 100? Все рисовать?

Последний раз редактировалось voraa, 30.10.2020 в 20:55.
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2020, 20:57
Интересующийся
Отправить личное сообщение для orloff Посмотреть профиль Найти все сообщения от orloff
 
Регистрация: 30.10.2020
Сообщений: 14

voraa,
То просто невнимательный копипаст шаблона бутстрапа, кроме своего data-page никаких атрибутов не планировал использовать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу JS разработчиков в лесу Kenjuy27 Работа 0 18.07.2018 09:06
Пагинация на Js Андрей310 Общие вопросы Javascript 1 08.04.2018 22:12
Диалог между HTML и внешним JS в контексте расширения GoogleChrome ev1lart Events/DOM/Window 0 26.04.2017 19:25
JS <-> Server Js. Severtain Общие вопросы Javascript 1 05.11.2011 15:36
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28