Springboot + Bootstrap + Thymeleaf + JQuery DataTablesを使って一覧表を作成してみます

1.構成

sample-datatables
└─src
    └─main
        ├─java
        │  └─com
        │      └─stone
        │          └─ccc
        │              │  DataTablesController.java
        │              │  DataTablesRestController.java
        │              │  SampleDatatablesApplication.java
        │              │  ServletInitializer.java
        │              └─bean
        │                      SampleUser.java
        └─resources
            │  application.properties
            ├─static
            │  └─DataTables-1.10.16
            │      │  Japanese.json
            │      ├─css
            │      │      dataTables.bootstrap.min.css
            │      │      dataTables.bootstrap4.min.css
            │      └─js
            │              dataTables.bootstrap.min.js
            │              dataTables.bootstrap4.min.js
            └─templates
                    index.html

point
JQuery DataTablesは resource/staticの下に配置しています。

2.依存(Gradle)

build.gradle

dependencies {
	compile('org.springframework.boot:spring-boot-starter-thymeleaf')
	compile('org.springframework.boot:spring-boot-starter-web')
	compile('org.apache.commons:commons-lang3:3.7')
	compile('org.webjars:jquery:3.2.1')
	compile('org.webjars:jquery-ui:1.12.1')
	compile('org.webjars:bootstrap:4.0.0')
	compile('com.fasterxml.jackson.datatype:jackson-datatype-jsr310')
	runtime('org.springframework.boot:spring-boot-devtools')
	providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
	testCompile('org.springframework.boot:spring-boot-starter-test')
}

point
com.fasterxml.jackson.datatype:jackson-datatype-jsr310を使って
List<>をJson配列に変換できるようにしておきます。

3.bean

SampleUser.java

package com.stone.ccc.bean;

public class SampleUser {

	public SampleUser( String username, String mailaddress) {
		this.username=username;
		this.mailaddress=mailaddress;
	}

	private String username;
	private String mailaddress;

	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getMailaddress() {
		return mailaddress;
	}
	public void setMailaddress(String mailaddress) {
		this.mailaddress = mailaddress;
	}
}

一覧表のデータを定義しています。ユーザデータにしています。

4.Controller
(1)Contoller

package com.stone.ccc;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class DataTablesController {
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String index(Model model) {
        return "index";
    }
}

index.htmlを返す簡単なControllerです

(2)RestController

DataTablesRestController.java

package com.stone.ccc;

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

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.stone.ccc.bean.SampleUser;

@RestController
public class DataTablesRestController {
	@RequestMapping("/getuserlist")
	public List<SampleUser> getuserlist() {
		List<SampleUser> list = new ArrayList<SampleUser>();
		for (int i=0; i<1000; i++) {
			SampleUser user= new SampleUser(
					String.valueOf(i+1),
					String.format("u%04d@sample.com",i+1));
			list.add(user);
		}
		return list;
	}
}

point
@RestControllerはhtml以外のデータを返すためのアノテーションです

ユーザデータの一覧を返します。1000件のデータを作成して返してみましょう。

5.html

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>ユーザ一覧</title>
<meta name="description" content="ユーザ一覧">
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="@{/DataTables-1.10.16/css/jquery.dataTables.min.css}"/>
<link rel="stylesheet" th:href="@{/DataTables-1.10.16/css/dataTables.bootstrap4.min.css}"/>
<script type="text/javascript" th:src="@{/webjars/jquery-ui/1.12.1/jquery-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/DataTables-1.10.16/js/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/DataTables-1.10.16/js/dataTables.bootstrap4.min.js}"></script>
<style>
</style>
</head>
<body>
	<table id="table1" class="table table-bordered table-hover table-lg">
		<thead class="thead-light">
			<tr>
				<th>ユーザ名</th>
				<th>メールアドレス</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<script th:inline="javascript">
	/*<![CDATA[*/
		var modalesectiondata = null;
		$(function(){
		    // datatableの設定を変更
			var modalesectiontable = $("#table1").DataTable({
				"bPaginate": true,
				"bLengthChange": false,
				"bFilter": true,
				"bSort": false,
				"bInfo": false,
				"bAutoWidth": false,
				"language": {
					"url": /*[[@{/DataTables-1.10.16/Japanese.json}]]*/ 'Japanese.json'
				},
				"ajax": { url: /*[[@{/getuserlist}]]*/ 'getuserlist', dataSrc: '' },
				"columns": [
					{ data: "username" },
					{ data: "mailaddress" },
				],
				"columnDefs": [
					{ targets: 0, width: 60 },
					{ targets: 1, width: 180 },
					{targets:'_all',className : 'dt-head-center'},
				]
			});
		})
	/*]]>*/
	</script>
</body>
</html>

point
ajaxパラメータに、RestControllerのURLを指定しています。

6.実行してみます。

一覧表を簡単に作成できました。