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.実行してみます。
一覧表を簡単に作成できました。