テンプレート:ページネーションのソースを表示

<html>
<div class="pagination">
  <a data-role="first-page" href="#" class="pagination-btn">
    <span class="btn-text">最初</span>
    <span class="btn-icon">«</span>
  </a>
  <a data-role="prev-page" href="#" class="pagination-btn">
    <span class="btn-text">前へ</span>
    <span class="btn-icon">‹</span>
  </a>
  <div class="page-numbers" data-role="page-numbers"></div>
  <a data-role="next-page" href="#" class="pagination-btn">
    <span class="btn-icon">›</span>
    <span class="btn-text">次へ</span>
  </a>
  <a data-role="last-page" href="#" class="pagination-btn">
    <span class="btn-icon">»</span>
    <span class="btn-text">最後</span>
  </a>
</div>

<style>
/* ========================================
   ページネーション全体
======================================== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 32px 0;
  font-size: 14px;
  flex-wrap: wrap;
  padding: 0 16px;
}

/* ========================================
   共通ボタンスタイル
======================================== */
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  user-select: none;
  font-weight: 500;
}

/* ========================================
   ナビゲーションボタン（最初・前・次・最後）
======================================== */
.pagination-btn {
  padding: 10px 16px;
  gap: 6px;
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.pagination-btn:hover:not(.disabled) {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.pagination-btn:active:not(.disabled) {
  transform: translateY(0);
}

/* ========================================
   ページ番号エリア
======================================== */
.page-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
}

.page-numbers a {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
  font-weight: 500;
}

.page-numbers a:hover:not(.current) {
  background: #f9fafb;
  border-color: #f59e0b;
  color: #f59e0b;
}

/* ========================================
   現在のページ
======================================== */
.page-numbers a.current {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
  font-weight: 600;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* ========================================
   非活性状態
======================================== */
.pagination a.disabled {
  background: #f9fafb;
  color: #9ca3af;
  border-color: #e5e7eb;
  pointer-events: none;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

/* ========================================
   テキスト・アイコン表示制御
======================================== */
.btn-text {
  display: inline;
}

.btn-icon {
  display: none;
  font-size: 18px;
}

/* ========================================
   レスポンシブ：タブレット以下
======================================== */
@media (max-width: 768px) {
  .pagination {
    gap: 6px;
  }
  
  .pagination-btn {
    padding: 10px 12px;
  }
  
  .btn-text {
    display: none;
  }
  
  .btn-icon {
    display: inline;
  }
  
  .page-numbers a {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* ========================================
   レスポンシブ：スマホ
======================================== */
@media (max-width: 480px) {
  .pagination {
    gap: 4px;
    margin: 24px 0;
  }
  
  .pagination-btn {
    padding: 8px 10px;
    min-width: 36px;
  }
  
  .page-numbers {
    gap: 3px;
  }
  
  .page-numbers a {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    font-size: 12px;
  }
}

/* ========================================
   ダークモード
======================================== */
.skin-theme-clientpref-night .pagination-btn,
.skin-theme-clientpref-night .page-numbers a {
  background: #2a2a2a;
  color: #e5e7eb;
  border-color: #3a3a3a;
}

.skin-theme-clientpref-night .pagination-btn:hover:not(.disabled),
.skin-theme-clientpref-night .page-numbers a:hover:not(.current) {
  background: #374151;
  border-color: #f59e0b;
  color: #f59e0b;
}

.skin-theme-clientpref-night .page-numbers a.current {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.skin-theme-clientpref-night .pagination a.disabled {
  background: #1e1e1e;
  color: #6b7280;
  border-color: #2a2a2a;
}

/* ========================================
   ダークモード（自動）
======================================== */
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os .pagination-btn,
  .skin-theme-clientpref-os .page-numbers a {
    background: #2a2a2a;
    color: #e5e7eb;
    border-color: #3a3a3a;
  }
  
  .skin-theme-clientpref-os .pagination-btn:hover:not(.disabled),
  .skin-theme-clientpref-os .page-numbers a:hover:not(.current) {
    background: #374151;
    border-color: #f59e0b;
    color: #f59e0b;
  }
  
  .skin-theme-clientpref-os .page-numbers a.current {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
  }
  
  .skin-theme-clientpref-os .pagination a.disabled {
    background: #1e1e1e;
    color: #6b7280;
    border-color: #2a2a2a;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 現在のURL取得
  let url = window.location.href;
  // ページネーション
  const fullurl = new URL(location.href);
  const page = parseInt(fullurl.searchParams.get('page') || '1', 10);

  // 最終ページ制御
  const countMeta = document.getElementById('count');
  if (!countMeta) return;

  const total = parseInt(countMeta.dataset.total, 10);
  const limit = parseInt(countMeta.dataset.limit, 10);

  if (isNaN(total) || isNaN(limit) || limit <= 0) return;

  const lastPage = Math.ceil(total / limit);

  if (lastPage <= 1) {
    const pagination = document.querySelector('.pagination');
    if (pagination) pagination.style.display = 'none';
    return;
  }

  if (page > lastPage) {
    fullurl.searchParams.set('page', lastPage);
    location.replace(fullurl.toString());
  }

  if (page < 1) {
    fullurl.searchParams.set('page', 1);
    location.replace(fullurl.toString());
  }

  function makeLink(targetPage) {
    fullurl.searchParams.set('page', targetPage);
    return fullurl.toString();
  }

  // 各ボタン
  const first = document.querySelector('[data-role="first-page"]');
  const prev  = document.querySelector('[data-role="prev-page"]');
  const next  = document.querySelector('[data-role="next-page"]');
  const last  = document.querySelector('[data-role="last-page"]');

  if (page <= 1) {
    first.classList.add('disabled');
    prev.classList.add('disabled');
  } else {
    first.href = makeLink(1);
    prev.href  = makeLink(page - 1);
  }

  if (page >= lastPage) {
    next.classList.add('disabled');
    last.classList.add('disabled');
  } else {
    next.href = makeLink(page + 1);
    last.href = makeLink(lastPage);
  }

  // 数字ボタン
  const pageNumbers = document.querySelector('[data-role="page-numbers"]');
  if (!pageNumbers) return;

  const start = Math.max(1, page - 2);
  const end = Math.min(lastPage, page + 2);

  for (let i = start; i <= end; i++) {
    const link = document.createElement('a');
    link.textContent = i;

    const newUrl = new URL(url);
    newUrl.searchParams.set('page', i);
    link.href = newUrl.toString();

    if (i === page) {
      link.classList.add('current');
    }

    pageNumbers.appendChild(link);
  }
});
</script>
</html>