● DataTables?
dataTables란 데이터를 테이블로 쉽게 표현하고 다양한 기능을 제공하는 라이브러리입니다.
● DataTables 사용 방법
먼저 DataTables를 사용하기 위해서는 css와 js파일을 추가해야 합니다.
각 url은 아래와 같습니다.
https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
html 코드입니다.
| <table id=”exampleTable” class=”table table-bordered”> <thead> <tr> <th>Seq</th> <th>Name</th> <th>Age</th> <th>Date</th> </tr> </thead> <tbody> <tr th:each=”data : ${serverData}”> <td th:text=”${data.seq}></td> <td th:text=”${data.name}></td> <td th:text=”${data.age}></td> <td th:text=”${data.date}></td> </tr> </tbody> </table> |
다음은 js코드입니다. 이는 html보다 더욱 간단한 코드 1줄입니다.
| $(“#exampleTable”).DataTable({ }); |
이렇게 구현 후 실행하면 위의 그림과 같은 테이블의 모습이 완성됩니다.
.DataTable() 이라는 간단한 명령어로 기본적인 옵션을 가진 테이블이 생성되었는데요.
이제 이 안에서 다양한 option을 통해 테이블의 기능을 활성, 비활성 또는 커스터마이징 할 수
있습니다. 예를 들어 paging을 비활성화 하고 싶다면 다음과 같이 처리하면 됩니다.
paging은 디폴트 값이 true이므로, 이를 false 처리하면 됩니다.
| $(“#exampleTable”).DataTable({ paging: false }); |
이 옵션의 디폴트 값 및 종류는 아래 가이드를 참고 바랍니다.
https://datatables.net/reference/option/
답글 남기기