「飲食店検索」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 620行目: | 620行目: | ||
} | } | ||
// | // 各ボタン | ||
const next = document.querySelector('[data-role="next-page"]'); | 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"]'); | const pageNumbers = document.querySelector('[data-role="page-numbers"]'); | ||
| 748行目: | 744行目: | ||
<html> | <html> | ||
<div class="pagination"> | <div class="pagination"> | ||
<a data-role="first-page" href="#"><<</a> | |||
<a data-role="prev-page" href="#"><</a> | <a data-role="prev-page" href="#"><</a> | ||
<div class="page-numbers" data-role="page-numbers"></div> | <div class="page-numbers" data-role="page-numbers"></div> | ||
<a data-role="next-page" href="#">></a> | <a data-role="next-page" href="#">></a> | ||
<a data-role="last-page" href="#">>></a> | |||
</div> | </div> | ||