Пагинация на 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>

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

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

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