Springboot + Bootstrap + Thymeleaf + JQuery DataTables에서 나열

18408 단어 DataTablesspring-bootBootstrapjQueryThymeleaf

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

포인트
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')
}

포인트
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을 반환하는 간단한 컨트롤러입니다.

(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%[email protected]",i+1));
            list.add(user);
        }
        return list;
    }
}

포인트
@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>

포인트
ajax 매개 변수에 RestController URL을 지정합니다.

6. 실행해 봅니다.


목록을 쉽게 만들 수 있습니다.
SpringBoot의 Hello World
Springboot + Thymeleaf + Layout Dialect를 사용하여 화면 레이아웃을 공통화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage