[JavaScript] DataTables 사용 방법

JQuery 용 테이블 라이브러리인 DataTables 플러그인을 사용하여 개발했을 경우 편리하게 사용하기 위해 구조를 설계하였습니다.

DataTables는 데이터를 테이블로 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

설치와 사용법은 DataTables 공식 사이트에 잘 설명되어 있기 때문에 생략하겠습니다.

초기 설정

여러 곳에서 DataTables로 작업할 때 유용하도록 초기 기본값으로 설정하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// table.js
$.extend($.fn.dataTable.defaults, {
autoWidth: false,
dom: `<'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i>` + `<'col-sm-12 col-md-7 dataTables_pager'lp>>`,
language: {
emptyTable: '데이터가 없습니다.',
infoEmpty: '',
info: ' _TOTAL_ 개의 데이터가 있습니다.',
search: '<span>검색 :</span> _INPUT_',
searchPlaceholder: '내용 입력...',
lengthMenu: 'Display _MENU_',
paginate: {
first: 'First',
last: 'Last',
next: $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
previous: $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;',
},
},
// 검색 기능 숨기기
searching: false,
// 표시 건수기능 숨기기
lengthChange: false,
// 한 페이지에 표시되는 Row 수
pageLength: 10,
});

기본 구조

기본 구조를 설계하여 다른 파일에서 공통으로 사용할 수 있도록 하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// table.js
const Datatables = {
// 기본 테이블 구조
basic: function (id, tableOption, info) {
let table = $(id).DataTable({
// 반응형 테이블 설정
responsive: true,
language: {
info: info ? info : ' _TOTAL_ 개의 데이터가 있습니다.',
},
columns: tableOption ? tableOption.columns : null,
order: [[0, 'asc']],
});

return table;
},
// 정렬하는 컬럼을 설정하도록
order: function (id, tableOption, num, info) {
let table = $(id).DataTable({
responsive: true,
language: {
info: info ? info : ' _TOTAL_ 개의 데이터가 있습니다.',
},
columns: tableOption ? tableOption.columns : null,
columnDefs: [
{ orderable: true, className: 'reorder', targets: 0 },
{ orderable: true, className: 'reorder', targets: num },
{ orderable: false, targets: '_all' },
],
order: [[num, 'desc']],
});

return table;
},
// 데이터 추가
rowsAdd: function (table, url, param) {
table.clear();

$.ajax({
url: url,
type: 'POST',
data: JSON.stringify(param),
contentType: 'application/json',
success: function (data) {
table.rows.add(data).draw();
// 반응형 테이블 사용
table.responsive.recalc();
},
});
},
// 새로고침
refresh: function (table, data) {
table.clear();
table.rows.add(data).draw();
},
};

사용 예제

예를 들어 공지사항 테이블을 만들어 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- notice.html -->
<table class="table" id="noticeTable">
<thead class="text-center">
<tr>
<th>#</th>
<th>제목</th>
<th>작성자</th>
<th>작성시간</th>
<th>조회수</th>
</tr>
</thead>
<tbody class="text-center"></tbody>
</table>

<!-- thymeleaf 사용 -->
<script th:src="@{/js/table.js}"></script>
<script th:src="@{/js/notice.js}"></script>

table 태그의 id를 설정하고 위에서 설정한 Datatables.order 함수를 통해 DataTables을 생성하였습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// notice.js
const dataTable = {
ele: '#noticeTable',
table: null,
option: {
columns: [
{
data: null,
render: function (data, type, row, meta) {
return meta.row + 1;
},
},
{ data: 'title' },
{ data: 'userId' },
{ data: 'createDate' },
{ data: 'hit' },
],
},
init: function () {
// DataTables 생성
this.table = Datatables.order(this.ele, this.option, 3);
this.search();
},
search: function () {
const param = new Object();
// 조회 조건에 따라 데이터를 조회해서 DataTables에 넣는다.
Datatables.rowsAdd(this.table, contextPath + '/notice/search', param);
},
};

$(document).ready(function () {
dataTable.init();
});

결과

DataTables 라이브러리를 사용하여 구현해 봤습니다. 여러 프로젝트에서 공통으로 사용하기 위해 정리를 하였는데 개선사항이 있으면 추가할 예정입니다.

Share