개발노트: Jquery datatable 편집

== Jquery DataTables == * dataTables은 데이터를 테이블로 쉽게 표현하고 다양한 기능을 제공하는 라이브러리, * https://datatables.net/ 참조 === 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 ==== 사용 예제 ==== * 간단한 테이블을 만드는 예제 1) html 코드 :- 테이블 헤드정보(thead) 와 바디(tbody) 기술 <source lang=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> </source> 2) js 코드 - 간단한 코드 1줄 임. <source lang=js> $("#exampleTable").DataTable({ }); </source> * .DataTable() 명령어로 기본적인 옵션을 가진 테이블 생성. * 다양한 option을 통해 테이블의 기능을 활성, 비활성 또는 커스터마이징 할 수 있음 ** 예를 들어 paging을 비활성화 하고 싶다면 (paging은 디폴트 값은 true) <source lang=js> $("#exampleTable").DataTable({ paging: false }); </source> * 옵션 디폴트 값 및 종류는 가이드를 참고 *: https://datatables.net/reference/option/ ---- === [[datatable 츨력건수 기본값 세팅]] === {{:datatable 츨력건수 기본값 세팅}} ---- === [[datatable 속성 값에 따라 색상 변경]]=== {{:datatable 속성 값에 따라 색상 변경}} == 참조 == === 테마 변경 === https://datatables.net/beta/1.9/examples/basic_init/themes.html [[category:jquery]] [[category:jquery datatable]]