dataTables
#
Find similar titles
-
최초 작성자
hskim@insilicogen.com
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
DataTables #
- HTML의 table을 데이터 그리드 형식으로 사용하기 위한 라이브러리
- MIT 라이센스와 jQuery 사용
dataTables의 장점 #
- table그리드의 기능을 빠르게 구현
- 표시 건수 제어 가능
- 페이징 기능
- 정렬 기능
- 스크롤 기능
- 서버에서 json 데이터를 받아 표시할 수 있음
- bootstrap을 적용하여 디자인이 깔끔
- 여러 옵션을 제공하여 사용자 편의에 용이(https://datatables.net/)
시작 #
html #
<table id = "dataTable>
<thead>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
js #
<script>
$('#dataTable').DataTable({
ajax : {
method : "POST",
url : "서버URL주소",
data : function(d) { // d -> 기본 datatable 파라미터
return d;
}
},
columns : [
{data : "컬럼1"},
{data : "컬럼2"},
{data : "컬럼3"}
]
})
</script>
- 비동기를 이용하여 원하는 데이터를 json 데이터로 가져온 후 위 코드와 같이 사용
serverSide #
- dataTables는 서버에서 가져온 데이터를 설정한 옵션에 맞게 그리드 형태로 그려주는 라이브러리이므로 대용량의 데이터를 가져와 표시할 때는 속도 저하의 이슈가 있음
-
페이지 정보와 표시 건수 및 검색 조건 등의 데이터를 parameter로 보낸 후 서버에서 정제하여 원하는 만큼의 데이터를 가져와 사용할 때 serverSide 옵션을 사용
<script> $('#dataTable').DataTable({ ajax : { method : "POST", url : "서버URL주소", data : function(d) { // d -> 기본 datatable 파라미터 return d; } }, serverSide : true, columns : [ {data : "컬럼1"}, {data : "컬럼2"}, {data : "컬럼3"} ] }) </script>
- 이때 서버에서는 조회 하고자 하는 데이터의 전체 row 수를 함께 전송해야 하고 표시한 데이터의 key는 data, row 수의 key는 recordsTotal 값으로 함
Option #
-
DataTables의 다양한 옵션 기능으로 편리하게 테이블을 구성 가능
<script> $('#dataTable').DataTable({ //옵션 "destroy" : true, //테이블 재생성 "paging": true, //페이징처리 "ordering": true, //칼럼별 정렬기능 "autoWidth": false, //가로자동 "lengthChange": true, //데이터건수 변경 "pageLength": 50, //기본 데이터건수 "order": [15,'desc'], //기본 정렬칼럼 "searching": false, //검색 "scrollX": true, //가로 스크롤 serverSide : true, //서버사이드 ... }) </script>
Button #
- DataTables를 이용해 복사하기/엑셀로 저장하기/PDF로 저장하기/프린트하기 버튼 생성 가능
-
해당 부분의 옵션으로 주면 간단하게 적용할 수 있다. 만약 오류가 발생하거나 아무 버튼이 동작하지 않는다면 필요한 js 파일을 정상적으로 불러왔는지 확인이 필요하다.
<script> $('#myTable').DataTable( { buttons: [ { extend: 'copy', text: 'Copy to clipboard' }, 'excel', 'pdf' ] }); </script>