Springboot + Bootstrap + Thymeleaf + JQuery DataTablesで一覧表示 #jQuery

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.実行してみます。

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