다른 명령
Jquery DataTables
- dataTables은 데이터를 테이블로 쉽게 표현하고 다양한 기능을 제공하는 라이브러리,
- https://datatables.net/ 참조
= DataTables 사용 방법
- DataTables를 사용하기 위해서는 css와 js파일을 추가
사용 예제
- 간단한 테이블을 만드는 예제
1) html 코드
- 테이블 헤드정보(thead) 와 바디(tbody) 기술
<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>
2) js코드
- 간단한 코드 1줄 임.
$("#exampleTable").DataTable({ });
- .DataTable() 명령어로 기본적인 옵션을 가진 테이블 생성.
- 다양한 option을 통해 테이블의 기능을 활성, 비활성 또는 커스터마이징 할 수 있음
- 예를 들어 paging을 비활성화 하고 싶다면 다음과 같이 처리하면 됩니다.
paging은 디폴트 값이 true이므로, 이를 false 처리하면 됩니다. $("#exampleTable").DataTable({
paging: false
});
이 옵션의 디폴트 값 및 종류는 아래 가이드를 참고 바랍니다. https://datatables.net/reference/option/
이 정도면 dataTables의 기본 기능을 활용하여 테이블을 사용 할 수 있습니다.
다만 이런식으로 많은 양의 데이터를 처리할 경우 그 성능이 매우 떨어집니다.
하나의 테이블을 로딩하는데 많은 시간이 소요되면 페이지 자체에 문제가 생길 수도 있죠
위의 예시에서 처럼 th:each 루프를 돌며 모든 데이터를 그린 후 테이블이 로드되기 때문입니다
이를 해결하기 위한 방법으로 Server-side Processing을 활용할 수 있습니다.