BootstrapTableのページネーション制御で、1ページ分のデータのみ取得して表示する(SpringBoot)

はじめに

BootstrapTableの使い方のメモです。以下の要件を満たしたテーブルを作りたいと思います。

テーブルをページネーション付きで表示する
表示するデータをサーバーから取得する
1ページ分のデータのみ取得する（デフォルトだと全ページ分のデータを最初に取得する）

作成にあたって、以下の公式ドキュメントを参考にしました。他にも沢山のカスタムができるので良ければ参考にしてください。 BootstrapTable Document

完成系

バージョン情報等

Eclipse：2022-06 M1 (4.24.0 M1)
Java：17
テンプレートエンジン：thymeleaf
SpringBoot：3.2.4
Bootstrap Table：1.22.4

プロジェクト作成

プロジェクトの作成方法は、参考程度に少しだけ記載します。確認不要な方は、読み飛ばしてしまってOKです。 1. Spring Initializrを使ってアプリケーションのひな形を作成します。

2. 作成したアプリケーションをEclipseにインポートします。

初期設定

まずは、Controllerと画面を1組用意して、Bootstrap Tableを使えるようにします。特別なことはしていないので、手順の説明は飛ばして、コードだけ載せておきます（軽い説明はコード上に記載）。

Controller（WelcomeController.java）画面（index.html）

package com.example.bootstrapTableWork.controller;
/** ↑controllerパッケージを作成して配下に配置 */

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WelcomeController {
	
	/**
	 * 「http://localhost:8080/」にブラウザからアクセスで表示する画面を指定
	 */
	@GetMapping("/")
	public String index() {
		return "index";
	}
}

<!DOCTYPE html>
<!-- 「src/main/resources」配下に配置 -->

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bootstrap Table</title>
<!-- Bootstrap（Bootstrap Tableを動かすのに必要）のCSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap TableのCSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.css">
</head>
<body>
	<div class="container mt-5">
		<table class="table" data-toggle="table">
			<thead class="table-primary">
				<tr>
					<th>Name</th>
					<th>Sex</th>
					<th>Age</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>髙橋</td>
					<td>男</td>
					<td>25</td>
				</tr>
				<tr>
					<td>田邊</td>
					<td>女</td>
					<td>19</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- jQuery（Bootstrap Tableを動かすのに必要）のJS -->
	<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap（Bootstrap Tableを動かすのに必要）のJS -->
	<script src="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.js"></script>
	<!-- Bootstrap TableのJS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

動作確認

Spring Bootアプリケーションを実行

「http://localhost:8080/」にアクセスして、以下の画面が表示されていればOK

コード修正

本題の、テーブル作成を行っていきます。ただ、手順を説明するより、コード上にコメントを付けた方が分かりやすい気がするので、こちらもコードを掲載するにとどめます。

Controller（WelcomeController.java）画面（index.html）

package com.example.bootstrapTableWork.controller;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/** ↑controllerパッケージを作成して配下に配置 */

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import lombok.Getter;

@Controller
public class WelcomeController {

	/**
	 * 「http://localhost:8080/」にブラウザからアクセスで表示する画面を指定
	 */
	@GetMapping("/")
	public String index() {
		return "index";
	}

	/**
	 * テーブルデータをJson形式で返却する
	 * 
	 * @param offset 開始位置
	 * @param limit  取得件数
	 * @return テーブルデータ
	 */
	@PostMapping("/getTableData")
	@ResponseBody // 戻り値がそのままレスポンスのコンテンツになる
	public Map getTableData(@RequestParam("offset") int offset, @RequestParam("limit") int limit) {

		// 本来はDBから取得した情報を返却する処理になるじゃないかと思います。
		// offsetはデータの取得開始位置、liitは取得件数（1ページ毎のデータを取得するので、開始位置と取得件数を用いてDBよりデータ取得するイメージ）

		// 適当にデータ追加
		List personList = new ArrayList();
		personList.add(new Person("髙橋", "男", "19"));
		personList.add(new Person("佐藤", "男", "25"));
		personList.add(new Person("鈴木", "男", "56"));
		personList.add(new Person("山本", "男", "41"));
		personList.add(new Person("田邊", "男", "25"));
		personList.add(new Person("高田", "女", "8"));
		personList.add(new Person("立花", "女", "24"));
		personList.add(new Person("松本", "女", "12"));
		personList.add(new Person("山田", "女", "16"));
		personList.add(new Person("松村", "-", "32"));

		// totalは全データ件数
		// rowsは1ページ分のデータ中身
		return Map.of("total", 100, "rows", personList);
	}

	
	// 適当にBeanクラスを用意（別ファイルで作ってもOK）
	@Getter // getterを自動生成（普通に手書きでGetter書いても良い）
	class Person {
		private String name;
		private String sex;
		private String age;

		// コンストラクタ
		Person(String name, String sex, String age) {
			this.name = name;
			this.sex = sex;
			this.age = age;
		}
	}
}

<!DOCTYPE html>
<!-- 「src/main/resources」配下に配置 -->

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bootstrap Table</title>
<!-- Bootstrap（Bootstrap Tableを動かすのに必要） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Bootstrap Table-->
<link rel="stylesheet"
	href="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.css">
</head>
<body>
	<div class="container mt-5">
    <!-- 
    data-ajax=getData：JavaScriptのgetDataメソッドの戻り値がテーブルのデータとなる
    data-side-pagination="server"：1ページ分のデータだけ取得する
    data-pagination="true"：テーブルにページネーションを追加
    -->
    <table class="table"
      data-toggle="table"
      data-ajax="getData"
      data-side-pagination="server"
      data-pagination="true">
        <thead class="table-primary">
          <tr>
            <!-- data-fieldの名前はBeanクラスのフィールド名と一致させる -->
            <th data-field="name">Name</th>
            <th data-field="sex">Sex</th>
            <th data-field="age">Age</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
	</div>
	<!-- jQuery（Bootstrap Tableを動かすのに必要） -->
	<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap（Bootstrap Tableを動かすのに必要） -->
	<script src="https://unpkg.com/bootstrap-table@1.22.4/dist/bootstrap-table.min.js"></script>
	<!-- Bootstrap Table -->
	<script
		src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

	<script>
    // コントローラーのgetTableDataメソッドをリクエストして、1ページ分のテーブルデータを取得する
		function getData(params) {
			var url = 'http://localhost:8080/getTableData';
			$.post(url + '?' + $.param(params.data)).then(function(res) {
				params.success({"total": res.total, "rows": res.rows});
			});
		}
	</script>
</body>
</html>

動作確認

お疲れ様でした!!

駆け出しエンジニアの勉強日記

BootstrapTableのページネーション制御で、1ページ分のデータのみ取得して表示する(SpringBoot)

目次

はじめに

完成系

バージョン情報等

プロジェクト作成

初期設定

動作確認

コード修正

動作確認