[ jQuery ] DataTables - Ajax Table Data 출력

---

오늘은 실무에서 JavaScript Source의 바탕으로 사용되고 있는 DataTables 라이브러리에 대해 포스팅해보겠습니다.

 

현재 LG 프로젝트 진행 중에 소스를 분석하면서 DataTables라는 라이브러리를 접하면서 당황스러움과 사용 방법에 대해 분석을 하면서 재미를 느꼈습니다.

 

제 생각 바탕으로 포스팅을 이어나가기 때문에 정답이 아닐 수도 있습니다.

 

설치법은  공식 사이트에 더 자세하게 알려주기 때문에 생략하겠습니다.

DataTables | Table plug-in for jQuery

---

DataTables 란?

 

DataTable은 데이터를 행과 열이 있는 단순한 스프레스시트로 저장할 수 있는 변수 유형으로,

각각의 데이터 조각이 고유한 열과 행 좌표를 기반으로 식별될 수 있도록 합니다.

 

예시로 Excel 워크시트의 메모리 표현이라고 생각해 보시면 될 거 같습니다.

 

DataTables에서는 열과 행을 식별하는 규칙적인 관행이 적용되며, 열은 대문자를 통해 식별되고 행은 숫자를 통해 식별됩니다.

 

결론적으로는 dataTables는 데이터를 테이블로 쉽게 표현하고 다양한 기능을 제공하는 라이브러리입니다.

 

이름에서도 알 수 있듯이 DataTables는 jQuery에 대한 의존성을 갖습니다.

 

DOM(Document Object Model)을 조작하기 때문에 사실 그렇게 좋은 조합은 아니지만 테이블 자체에서만 사용을 한다면 나쁘지 않습니다.

 

그렇다면 사용 방법에 대해 바로 알아봅시다.

 

---

Initial Settings

 

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

 

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

 

---

Basic Structure

 

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

 

DataTables를 사용하는 이유 중 하나가 공통으로 사용할 수 있게 설정을 하는 게 좋습니다.

 

사실 공통으로 사용하는 게 아니라면 사용할 이유는 없습니다.

즉, 다른 화면에서 공통으로 사용할 수 있도록 세팅을 했습니다.

 

예제로 Notice Table을 만들어서 적용해 보겠습니다.

---

TEST

 

• 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를 설정하고 설정한 Datables.order 함수를 통해 Tables을 생성하였습니다.

 

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

 

notice.js 파일에서는 데이터 맵핑을 위해 JSON 타입의 data를 가져올 수 있도록 조회 조건에 필요한 data를 넣어주고 요청을 보내줍니다.

 

---

RESULT

 

---

마치며

 

오늘은 DataTables 라이브러리에 대해 알아봤습니다.

 

DataTables는 프론트나 서버사이드 개발자가 소팅, 페이징, 검색등을 전혀  신경 쓰지 않아도 된다는 장점이 큰 거 같습니다.

JSON으로 응답받는 정보들은 전체 리스트를 내려주기만 하면 알아서 테이블을 그려주고 완성된 이후에는 검색이나 소팅이 굉장히 빠르게 동작합니다.

 

하지만 데이터가 5만 건이 넘어가는 시점이 되자 페이지 로딩 시간이 1분이 넘어가버렸습니다.

 

검색해 보면 datatable의 Server-side processing을 사용해서 ajax  콜 방식으로 API에 페이지 및 소팅, 검색 처리까지 모두 처리했지만, 5만 건? 10~40만 건이 넘어가면서 무용지물이었습니다...

 

장점이 있으면 단점도 있습니다.

 

다음 포스팅에서 뵙겠습니다.