[JQuery] DataTables 사용 방법

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

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

 

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

초기 설정

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

// 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,
});

기본 구조

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

// 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();
  },
};

사용 예제

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

<!-- 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을 생성하였습니다.

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