[Datatables.js] Datatables 이용하여 테이블 만들기(사용법)

1. https://datatables.net/ 
 - css/js 등 필요한 파일 연결

 

2. table 하나 그린 뒤 (스크립트 작성)

<div class="card o-hidden border-0 shadow-lg my-5">
    <div class="card-body p-0">
        <!-- Nested Row within Card Body -->
        <div class="row">
            <div class="col-lg">
                <div class="p-5">
                    <div class="text-center">
                        <h3 class="text-gradient text-primary">테이블 만들기</h3>
                    </div>
                    <div class="card-body pb-2">
                        <div class="row">
                            <table id="example" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>회원번호</th>
                                    <th>이메일</th>
                                    <th>이름</th>
                                    <th>전화번호</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

3.  Controller

 - 해당 페이지 연결

 - 페이징 처리 포함하여 데이터 넘겨주기 (Ajax)
: PageRequest
- 몇 페이지, 한 페이지의 사이즈, Sorting 방법(Option)을 가지고, Repository에 Paging을 요청할 때 사용하는 것
 - PageRequest의 생성에는 찾을 page와 한 페이지의 size를 필수 인자로 받는다.
- Repository에서 findAll 메서드를 살펴보면 위와 같이 Pageable을 인자로 줄 수 있다.
  PageRequest는 Pageable 클래스를 implements한 AbstractPageReqeust 추상 클래스의 구현체이므로 findAll의 인자로 넣을 수 있다.

-> 따라서 page,size,sort(option)으로 PageRequest를 생성하고, Repository의 findAll 메서드의 인자에 PageRequest를 넣어주면 된다. 그러면 반환은 Page이 된다.

: formData 중 필요한 것 들만 객체로 만든 것(DataTableDto 엔티티 생성)
    @Data
    static class DataTableDto {
        private int page;
        private int draw;
        private int start;
        private int length;
        private int recordsTotal;
        private int recordsFiltered;
        private List data;
    }

 

4. Ajax 받기
Data로 넘겨서 받음

<script th:src="@{https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js}">
</script>

<script>
    $("#example").DataTable({
        "serverSide": true, // 서버사이드 활성화(페이징 처리시 필수) //server와 통신여부
        "paging": true, // 페이징 기능 활성화
        "processing": true, // 서버와 통신할 때 통신 하는 중이라는 표시 또는 이미지
                            //서버와 통신 시 응답을 받기 전이라는 ui를 띄울 것인지 여부
        // "searching ": true, //검색 기능 사용 여부
        // "info": false, // 테이블 하단에 페이징에 대한 정보 표시 // 정보 표시(기본값 true = 보이기)
        "ordering": false, // 상단의 10개, 25개등등 숨기기
        "pageLength": 10, // 한 페이지에 몇개의 글 목록을 보여줄지
        "lengthChange": false,
        "ajax": {
            "url": "/api/member/withdrawal",
            "type": "POST",
            "dataSrc": function (res) {
                console.log(res);
                let data = res.data;
                return data;
            }
        },
        language: {
            paginate: {
                "previous": "이전",
                "next": "다음"
            }
        },
        "columns": [
            {"data": "id"},
            {"data": "email"},
            {"data": "name"},
            {"data": "mobile"}
        ]
    });
</script>