|
|
| (同じ利用者による、間の4版が非表示) |
| 1行目: |
1行目: |
| <templatestyles src="検索結果カード/styles.css" /> | | <templatestyles src="検索結果カード/styles.css" /> |
| | <templatestyles src="飲食店一覧ページ/styles.css" /> |
| {{パンくずリスト|1=飲食店検索|2={{{genre}}}}} | | {{パンくずリスト|1=飲食店検索|2={{{genre}}}}} |
| <html>
| |
| <style>
| |
| .search-intro p {
| |
| margin: 4px 0;
| |
| }
| |
| /* --- 検索説明文(ライトテーマ) --- */
| |
| .search-intro {
| |
| background: #f7f9fc;
| |
| padding: 12px 16px;
| |
| border-radius: 8px;
| |
| margin-bottom: 20px;
| |
| font-size: 0.95rem;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* --- 検索説明文(ダークテーマ) --- */
| |
| html.skin-theme-clientpref-night .search-intro {
| |
| background: #1f2430;
| |
| color: #e5e7eb;
| |
| padding: 12px 16px;
| |
| border-radius: 8px;
| |
| margin-bottom: 20px;
| |
| font-size: 0.95rem;
| |
| line-height: 1.6;
| |
| }
| |
| </style>
| |
| </html>
| |
| <div class="search-intro"> | | <div class="search-intro"> |
| <p> | | <p> |
| 106行目: |
80行目: |
|
| |
|
| 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> |
| 193行目: |
85行目: |
| {{#vardefine:hitCount | | | {{#vardefine:hitCount | |
| {{#cargo_query: | | {{#cargo_query: |
| tables=飲食店情報 | | tables=図鑑情報 |
| |fields=COUNT(*) | | |fields=COUNT(*) |
| |where=( | | |where=( |
| 飲食店情報.ジャンル LIKE CONCAT('%{{{genre}}}%') | | 図鑑情報.カテゴリ='飲食店' AND |
| | 図鑑情報.ジャンル LIKE CONCAT('%{{{genre}}}%') |
| ) | | ) |
| }} | | }} |
| 216行目: |
109行目: |
| <!-- 検索実行 --> | | <!-- 検索実行 --> |
| {{#cargo_query: | | {{#cargo_query: |
| tables=飲食店情報 | | tables=図鑑情報 |
| |fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標 | | |fields=図鑑情報._pageName,図鑑情報.店名,図鑑情報.画像,図鑑情報.ジャンル,図鑑情報.郵便番号,図鑑情報.住所,図鑑情報.最寄り,図鑑情報.営業時間月,図鑑情報.定休日,図鑑情報.電話番号,図鑑情報.予算昼下限,図鑑情報.予算昼上限,図鑑情報.予算夜下限,図鑑情報.予算夜上限,図鑑情報.ストリートビューURL,図鑑情報.座標 |
| |where=( | | |where=( |
| 飲食店情報.ジャンル LIKE CONCAT('%{{{genre}}}%') | | 図鑑情報.カテゴリ='飲食店' AND |
| | 図鑑情報.ジャンル LIKE CONCAT('%{{{genre}}}%') |
| ) | | ) |
| |format=template | | |format=template |
| 230行目: |
124行目: |
| |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}}}
0 件の結果があります(1 件目~)
検索結果
該当する店舗はありません。