(Sample)
ページネーション【Pagination】は、ウェブサイトやアプリケーションで長いリストや複数のページで構成されるコンテンツを複数のページに分割して表示するための手法です。これにより、ユーザーは大量のコンテンツを管理しやすくなり、必要な情報を見つけやすくなります。
ページネーションは、特に以下のような場合によく使用されます：
- データの多いテーブルやリストの表示: データベースのクエリ結果やサーバーからの大量のデータを表示する場合、全てのデータを1つのページに表示するとページが非常に長くなってしまいます。ページネーションを使用することで、データを複数のページに分割し、利用者は必要なデータを探しやすくなります。
- 検索結果の表示: 検索エンジンやオンラインストアなどで検索結果を表示する場合、多くの項目が見つかる可能性があります。ページネーションを使えば、ユーザーは検索結果をページごとにナビゲートし、該当する結果を見つけやすくなります。
- コメントやフォーラムのスレッド表示: コメントやフォーラムのスレッドが長くなる場合、ページネーションを使ってそれらを分割することができます。これにより、ユーザーは特定のページのコメントやスレッドに参加しやすくなります。
一般的なページネーションの要素には、ページ番号や「前へ」「次へ」のリンク、最初や最後のページへのリンクなどがあります。ユーザーがこれらの要素をクリックすると、新しいページのコンテンツが表示されます。
ページネーションは、ユーザーエクスペリエンスの向上やパフォーマンスの最適化に役立ちます。ユーザーは必要な情報を素早く見つけることができ、サーバーやクライアントの負荷も軽減されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* ページングコンテナのスタイル */
#pagination {
margin-top: 10px;
}
/* ページ番号のリンクのスタイル */
#pagination a {
display: inline-block;
margin-right: 5px;
padding: 5px 10px;
text-decoration: none;
color: #000;
border: 1px solid #ccc;
border-radius: 4px;
}
/* アクティブなページ番号のスタイル */
#pagination a.active {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
/* データアイテムのスタイル */
#data div {
margin-bottom: 5px;
padding: 10px;
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="data"></div>
<div id="pagination"></div>
<script>
// ダミーデータの配列
const dummyData = Array.from({length: 50}, (_, index) => index + 1);
// 1ページあたりのアイテム数と現在のページ番号
const itemsPerPage = 10;
let currentPage = 1;
// 現在のページのデータを取得する関数
function getCurrentPageData() {
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
return dummyData.slice(startIndex, endIndex);
}
// ページ番号を表示する関数
function renderPageNumbers() {
const totalPages = Math.ceil(dummyData.length / itemsPerPage);
const paginationElement = document.getElementById('pagination');
// ページ番号をクリア
paginationElement.innerHTML = '';
// ページ番号を生成
for (let i = 1; i <= totalPages; i++) {
const pageLink = document.createElement('a');
pageLink.href = '#';
pageLink.textContent = i;
// 現在のページにはアクティブなスタイルを適用
if (i === currentPage) {
pageLink.classList.add('active');
}
// ページ番号をクリックしたときの処理を設定
pageLink.addEventListener('click', () => {
currentPage = i;
renderPage();
});
// ページ番号を追加
paginationElement.appendChild(pageLink);
}
}
// 現在のページのデータを表示する関数
function renderPage() {
const dataElement = document.getElementById('data');
const currentPageData = getCurrentPageData();
// データをクリア
dataElement.innerHTML = '';
// データを表示
currentPageData.forEach((item) => {
const itemElement = document.createElement('div');
itemElement.textContent = `Item ${item}`;
dataElement.appendChild(itemElement);
});
// ページ番号を表示
renderPageNumbers();
}
// ページ初期表示
renderPage();
</script>
</body>
</html>