(function () {
var pager = document.querySelector('.pager');
if (!pager) return;
var nums = pager.querySelectorAll('[data-page]');
var prev = pager.querySelector('[data-nav="prev"]');
var next = pager.querySelector('[data-nav="next"]');
var current = 1;
var last = nums.length;
function render() {
nums.forEach(function (b) {
b.className = Number(b.getAttribute('data-page')) === current ? 'active' : '';
});
prev.disabled = current === 1;
next.disabled = current === last;
}
nums.forEach(function (b) {
b.addEventListener('click', function () {
current = Number(b.getAttribute('data-page'));
render();
});
});
prev.addEventListener('click', function () {
if (current > 1) { current--; render(); }
});
next.addEventListener('click', function () {
if (current < last) { current++; render(); }
});
render();
})();
current を1つ持って再描画する
現在ページを表す current という変数を1つだけ用意し、番号ボタンのクリックでその値を書き換えて render() を呼び直すのが基本形。render() では全ボタンの active クラスを付け直し、先頭ページなら「前へ」、末尾ページなら「次へ」を disabled にする。状態は current 1つに集約されるので、表示と実データがズレにくい。
(function () {
var pager = document.querySelector('.pager');
if (!pager) return;
var totalPages = 12;
var current = 1;
function makeBtn(pageNum) {
var b = document.createElement('button');
b.textContent = pageNum;
if (pageNum === current) b.className = 'active';
b.addEventListener('click', function () { current = pageNum; render(); });
return b;
}
function makeEllipsis() {
var span = document.createElement('span');
span.className = 'ellipsis';
span.textContent = '…';
return span;
}
function makeNav(dir, label, disabled) {
var b = document.createElement('button');
b.textContent = label;
b.disabled = disabled;
b.addEventListener('click', function () { current += dir; render(); });
return b;
}
function render() {
pager.textContent = '';
pager.appendChild(makeNav(-1, '‹', current === 1));
var pages = [1];
for (var i = current - 1; i <= current + 1; i++) {
if (i > 1 && i < totalPages) pages.push(i);
}
if (totalPages > 1) pages.push(totalPages);
var prevNum = 0;
pages.forEach(function (p) {
if (p - prevNum > 1) pager.appendChild(makeEllipsis());
pager.appendChild(makeBtn(p));
prevNum = p;
});
pager.appendChild(makeNav(1, '›', current === totalPages));
}
render();
})();
