ページネーションとは
ページネーション【pagination】とは、ウェブサイトやアプリケーションなどで大量のデータやコンテンツを管理しやすいように、データ数を一定の数(例えば10個や20個など)に分割して複数のページに表示する手法です。
以下のJSPコードの主な目的は、データセット(この場合は"車")を10件ずつページネーションして表示するHTMLテーブルを生成することです。
"numOfCars"という変数には表示する行(車)の総数を設定します。そして、各ページには最大10行の車の情報が表示されます。ここは本体データーベースから情報を取得する想定ですが、今回はダミーなので空欄です。それらの情報はHTMLテーブルで表示され瑠草亭です。その際、URLのクエリパラメータ "page" を参照して、現在のページ番号を取得しています。ぜひ、車の数を変更したらどうなるのかを確認してみてください。
行番号は現在のページ番号に基づき算出され、各ページではそのページに相応しい行番号の範囲のデータが表示されます。例えば、2ページ目では行番号が11から20までのデータが表示されます。しかし、もし総行数("numOfCars")がその範囲よりも小さい場合、その範囲内で総行数を超えないデータだけが表示されます。
最後に、ページネーションのコントロールも タグを使って動的に生成されています。必要な数のページリンクが表示され、ユーザーは好きなページに直接ジャンプすることができます。
ページネーションは大量のデータを扱う際に特に有用です。なお、このコードはシンプルな例です。現実のアプリケーションでは、エラーハンドリングや入力値チェックなど、さらなる処理が必要です。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination Example</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<%
int numOfCars = 31;
request.setAttribute("numOfCars", numOfCars);
%>
<div class="container">
<h2 class="my-4">ページネーションの例</h2>
<!-- Bootstrap Table -->
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>メーカー</th>
<th>モデル</th>
<th>年式</th>
</tr>
</thead>
<tbody>
<c:forEach let="i" begin="${param.page ne null ? ((param.page - 1) * 10) + 1 : 1}" end="${param.page ne null ? param.page * 10 : 10}">
<c:choose>
<c:when test="${i <= numOfCars}">
<tr>
<td>${i}</td>
<td></td>
<td></td>
<td></td>
</tr>
</c:when>
<c:otherwise>
<!-- Do nothing -->
</c:otherwise>
</c:choose>
</c:forEach>
</tbody>
</table>
<!-- Bootstrap Pagination -->
<nav aria-label="Page navigation example">
<ul class="pagination">
<c:forEach let="i" begin="1" end="${numOfCars / 10 + 1}">
<li class="page-item"><a class="page-link" href="?page=${i}">${i}</a></li>
</c:forEach>
</ul>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
以上、ページネーションをご紹介しました。