ページネーションとは

ページネーション【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 var="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 var="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>

以上、ページネーションをご紹介しました。

最後までお読みいただきありがとうございます。