「飲食店検索」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 599行目: | 599行目: | ||
document.head.appendChild(canonical); | document.head.appendChild(canonical); | ||
// ページネーション | |||
const fullurl = new URL(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); | |||
const | if (lastPage <= 1) { | ||
const pagination = document.querySelector('.pagination'); | |||
if (pagination) pagination.style.display = 'none'; | |||
return; | |||
} | |||
// 次へボタン | |||
const next = document.querySelector('[data-role="next-page"]'); | const next = document.querySelector('[data-role="next-page"]'); | ||
if (next) { | if (next) { | ||
fullurl.searchParams.set('page', page + 1); | if (page >= lastPage) { | ||
next.classList.add('disabled'); | |||
next.removeAttribute('href'); | |||
} else { | |||
const u = new URL(fullurl); | |||
u.searchParams.set('page', page + 1); | |||
next.href = u.toString(); | |||
} | |||
} | } | ||
// 前へボタン | |||
const prev = document.querySelector('[data-role="prev-page"]'); | const prev = document.querySelector('[data-role="prev-page"]'); | ||
if (prev) { | if (prev) { | ||
| 621行目: | 646行目: | ||
} | } | ||
} | } | ||
// 数字ボタン | |||
const pageNumbers = document.querySelector('[data-role="page-numbers"]'); | const pageNumbers = document.querySelector('[data-role="page-numbers"]'); | ||
if (!pageNumbers) return; | if (!pageNumbers) return; | ||
const start = Math.max(1, page - 2); | const start = Math.max(1, page - 2); | ||
const end = page + 2; | const end = Math.min(lastPage, page + 2); | ||
for (let i = start; i <= end; i++) { | for (let i = start; i <= end; i++) { | ||
| 645行目: | 670行目: | ||
</script> | </script> | ||
</html> | </html> | ||
{{#vardefine:page|{{#urlget:page|1}}}} | |||
{{#vardefine:limit|30}} | |||
{{#vardefine:offset| | |||
{{#expr: ({{#var:page}} - 1) * {{#var:limit}} }} | |||
}} | |||
{{#vardefine:hitCount | | {{#vardefine:hitCount | | ||
{{#cargo_query: | {{#cargo_query: | ||
| 674行目: | 704行目: | ||
}} | }} | ||
<h1 style="font-size: 1.2em;"> | <h1 style="font-size: 1.2em;"> | ||
<strong>{{#if: {{#urlget:station}} | {{#urlget:station}} |川西市}}</strong>の<strong>{{#if: {{#urlget:genre}} | {{#urlget:genre}} |グルメ}}</strong></h1><strong style="float: right;" id="count">{{#var:hitCount}}件</strong> | <strong>{{#if: {{#urlget:station}} | {{#urlget:station}} |川西市}}</strong>の<strong>{{#if: {{#urlget:genre}} | {{#urlget:genre}} |グルメ}}</strong></h1><strong style="float: right;" id="count" data-total="{{#var:hitCount}}" data-limit="{{#var:limit}}">>{{#var:hitCount}}件</strong> | ||
== 検索結果 == | == 検索結果 == | ||
<!-- 検索実行 --> | <!-- 検索実行 --> | ||
{{#cargo_query: | {{#cargo_query: | ||
tables=飲食店情報 | tables=飲食店情報 | ||