「飲食店検索」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 621行目: | 621行目: | ||
} | } | ||
} | } | ||
const pageNumbers = document.querySelector('[data-role="page-numbers"]'); | |||
if (!pageNumbers) return; | |||
const start = Math.max(1, page - 2); | |||
const end = 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> | ||
| 698行目: | 718行目: | ||
<html> | <html> | ||
<div class="pagination"> | <div class="pagination"> | ||
<a data-role="prev-page" href="#"> | <a data-role="prev-page" href="#">＜</a> | ||
<a data-role="next-page" href="#"> | <div class="page-numbers" data-role="page-numbers"></div> | ||
<a data-role="next-page" href="#">＞</a> | |||
</div> | </div> | ||
<style> | <style> | ||
.page-numbers { | |||
display: flex; | |||
gap: 6px; | |||
} | |||
.page-numbers a { | |||
min-width: 36px; | |||
padding: 8px 0; | |||
text-align: center; | |||
} | |||
/* 現在ページ */ | |||
.page-numbers a.current { | |||
background: #1f2937; | |||
color: #fff; | |||
border-color: #1f2937; | |||
font-weight: 600; | |||
pointer-events: none; | |||
} | |||
/* ダークテーマ対応 */ | |||
body.dark .page-numbers a.current { | |||
background: #f9fafb; | |||
color: #1f2937; | |||
border-color: #f9fafb; | |||
} | |||
.pagination { | .pagination { | ||
display: flex; | display: flex; | ||