|
|
| 106行目: |
106行目: |
|
| |
|
| meta.content = desc; | | meta.content = desc; |
|
| |
| // 現在の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);
| |
| }
| |
| });//# sourceURL=foobar.js | | });//# sourceURL=foobar.js |
| </script> | | </script> |
| 230行目: |
148行目: |
| |more results text= | | |more results text= |
| }} | | }} |
| <html>
| | {{ページネーション}} |
| <div class="pagination">
| |
| <a data-role="first-page" href="#">＜＜</a>
| |
| <a data-role="prev-page" href="#">＜</a>
| |
| <div class="page-numbers" data-role="page-numbers"></div>
| |
| <a data-role="next-page" href="#">＞</a>
| |
| <a data-role="last-page" href="#">＞＞</a>
| |
| </div>
| |
| | |
| <style>
| |
| .pagination {
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 12px;
| |
| margin: 24px 0;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .pagination a {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 8px 14px;
| |
| min-width: 40px;
| |
| text-decoration: none;
| |
| border-radius: 6px;
| |
| border: 1px solid;
| |
| transition: background-color 0.15s ease,
| |
| color 0.15s ease,
| |
| box-shadow 0.15s ease;
| |
| }
| |
| | |
| .page-numbers {
| |
| display: flex;
| |
| gap: 6px;
| |
| }
| |
| | |
| .page-numbers a {
| |
| min-width: 36px;
| |
| padding: 8px 0;
| |
| }
| |
| | |
| /* ライト・通常 */
| |
| .pagination a {
| |
| background: #f9fafb;
| |
| color: #1f2937;
| |
| border-color: #d1d5db;
| |
| }
| |
| | |
| .pagination a:hover {
| |
| background: #eef2f7;
| |
| box-shadow: 0 1px 4px rgba(0,0,0,0.08);
| |
| }
| |
| | |
| /* 非活性 */
| |
| .pagination a.disabled {
| |
| background: #f1f5f9;
| |
| color: #94a3b8;
| |
| border-color: #e2e8f0;
| |
| pointer-events: none;
| |
| box-shadow: none;
| |
| }
| |
| | |
| /* 現在ページ（数字） */
| |
| .pagination .page-numbers a.current {
| |
| background: #1f2937;
| |
| color: #fff;
| |
| border-color: #1f2937;
| |
| font-weight: 600;
| |
| pointer-events: none;
| |
| }
| |
| | |
| /* ダーク・通常 */
| |
| .skin-theme-clientpref-night .pagination a {
| |
| background: #374151;
| |
| color: #f9fafb;
| |
| border-color: #4b5563;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .pagination a:hover {
| |
| background: #4b5563;
| |
| } | |
| | |
| /* ダーク・非活性 */
| |
| .skin-theme-clientpref-night .pagination a.disabled {
| |
| background: #1f2937;
| |
| color: #6b7280;
| |
| border-color: #374151;
| |
| }
| |
| | |
| /* ダーク・現在ページ */
| |
| .skin-theme-clientpref-night .pagination .page-numbers a.current {
| |
| background: #f9fafb;
| |
| color: #1f2937;
| |
| border-color: #f9fafb;
| |
| } | |
| </style>
| |
| </html>
| |
| | |
| __目次非表示__ | | __目次非表示__ |
ホーム › 飲食店検索 › [[{{{genre}}}]]
川西市で人気の{{{genre}}}のお店を一覧でご紹介しています。
下の検索フォームを使えば、さらに条件を絞り込んで探すこともできます。
検索条件
川西市の{{{genre}}}
<strong style="float: right;" id="count" data-total="
エラー: テーブル飲食店情報が見つかりません。
" data-limit="30">
エラー: テーブル飲食店情報が見つかりません。
件の結果があります（1 件目～）
検索結果
エラー: テーブル飲食店情報が見つかりません。
