DataTables는 jquery 라이브러리로, 웹 개발에서 흔히 만들게되는 테이블을 간단하게 만들어주는 녀석이다. 최근 진행한 프로젝트에서 게시판 형태의 테이블이 주된 요소가 되는 화면을 여럿 개발하면서 배운 점을 정리하려고 한다. 통계 및 목록화면을 구성할 때, 가져와야하는 데이터 양이 많지 않다면, 사용하는 것도 좋겠다.
1. DataTables
DataTables | Table plug-in for jQuery
DataTables Table plug-in for jQuery Advanced tables, instantly DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any H
datatables.net
공홈 링크다. 매뉴얼 및 공식 문서와, 검색 기능을 제공한다. "Save Time, do more" 공홈에 적힌 소개 문구이다. 정말 마음에 든다. 테이블을 만들어내려면 html, css, js를 모두 손봐줘야하고, 테이블만 만들면 끝이냐? 그것도 아니다. 서버단에서 목록 데이터를 어떻게 넘겨주는지도 정해야하고, 페이지네이션, 각 필드별 정렬기능, 전체 데이터 개수, 데이터 검색 기능, 데이터 렌더링 시에 텍스트 변환... 벌써 머리가 아프다.
하지만 DataTables를 이용하면, 모두 간편하게 해결 가능하다. 차근차근 사용법을 알아보자.
2. 파일 추가
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.13.2/datatables.min.css"/>
</head>
현재 프로젝트의 HTML 파일에 데이터테이블즈 사용을 위한 css 파일을 <head>에 추가해준다.
<script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.13.2/datatables.min.js"></script>
</script>
현재 프로젝트의 HTML 파일에 데이터테이블즈 사용을 위한 js 파일을 <script>에 추가해준다.
<table style="width: 100%;" class="test_table">
<thead>
<tr class="test_table_thead">
<th>No</th>
<th>이름</th>
<th>전화번호</th>
<th>주소</th>
</tr>
</thead>
<tbody></tbody>
</table>
HTML 파일에 간단한 형태의 테이블을 만들어준다.
$(function () {
$(".test_table").DataTable({
info: false, // 테이블 데이터 정보 표시 여부
paging: true, // 페이지네이션 기능 사용 여부
lengthChange: false, // 한 페이지에 노출할 데이터 개수 설정 버튼 노출 여부
pageLength: 40, // 한 페이지에 노출할 데이터 개수 설정
searching: false, // 데이터 검색 기능 사용 여부
scroller: true, // 테이블 스크롤 사용여부
scrollY: "70vh", // 테이블 스크롤 Y축 길이 설정
processing: true, // 커스텀 로딩중(?) 사용
stateSave: true, // 상태 값 저장 여부
order: [0, 'desc'], // 데이터 정렬 (index, direction)
columns: [
{ data: "index" },
{ data: "name" },
{ data: "phone" },
{ data: "address" },
],
language: { // 언어 설정
paginate: { previous: "이전", next: "다음" },
emptyTable: "데이터가 없습니다.",
processing: '<div class="spinner"></div>',
},
ajax: {
url: "/api/users",
type: "GET",
},
rowCallback: function (row, data, index) { // 렌더링 후 사용할 콜백함수
},
});
});
HTML에 적용될 javascript 파일을 작성해준다. 주석에 적혀있는 내용을 참고하여 입맛대로 테이블 옵션들을 설정해준다. 데이터는 jquery ajax call로 서버단에서 데이터를 가져온다.
* 주의사항은 columns에 사용하려고 선언된 필드와 HTML에서 작성한 <th> 태그 개수가 일치해야한다. 또한, 서버단에서 데이터를 넘겨줄 시, 키 값으로 data를 사용해야한다. ex) { data: [] }
3. 잡기술
테이블 새로고침이 필요할 시,
$(".test_table").DataTable().ajax.reload();
반응형 필요 시, 데이터 테이블 옵션에 아래 옵션 추가
responsive: true,
테이블 필드 width 설정
columns: [
{ width: "70px", data: "name" },
],