[TIL] DataTables

데이터 테이블이란?

• 테이블을 그리드 형식으로 사용하고, 표시 건수 제어, 페이징, 정렬, 검색, 필터, 스크롤 기능 등을 제공하는 라이브러리다.

• 서버에서 데이터를 JSON형식으로 받아 표시하고,
  표시 건수 제어 기능,
  검색 기능,
  정렬 기능,
  필터 기능,
  스크롤 기능이 제공 된다.

JSON 데이터 테이블에 출력하기

데이터 테이블을 사용하기 위해서는 DataTables의 JS파일, CSS파일, jQuery를 필요로 한다.

HTML파일에 DataTabels, jQuery CDN을 가져온다.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"
    />
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>

html 파일에 table을 생성한다.

    <table id="data_list" class="table table-bordered">
      <thead>
        <tr>
          <th>ID</th>
          <th>이름</th>
          <th>지역</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

json 파일을 생성한다.

[
  {
    "id": "JSON01",
    "name": "제이슨01",
    "location": "서울"
  },
  {
    "id": "JSON02",
    "name": "제이슨02",
    "location": "충북"
  },
  {
    "id": "JSON03",
    "name": "제이슨03",
    "location": "충남"
  },
  {
    "id": "JSON04",
    "name": "제이슨04",
    "location": "대전"
  },
  {
    "id": "JSON05",
    "name": "제이슨05",
    "location": "제주도"
  },
  {
    "id": "JSON06",
    "name": "제이슨06",
    "location": "집"
  },
  {
    "id": "JSON07",
    "name": "제이슨07",
    "location": "학교"
  },
  {
    "id": "JSON08",
    "name": "제이슨08",
    "location": "미국"
  },
  {
    "id": "JSON09",
    "name": "제이슨09",
    "location": "전라남도"
  },
  {
    "id": "JSON10",
    "name": "제이슨10",
    "location": "경기도"
  }
]

js 파일을 생성한다.

$(document).ready(function () {
  $('#data_list').DataTable({
    ajax: { url: 'data.json', dataSrc: '' },
    columns: [{ data: 'id' }, { data: 'name' }, { data: 'location' }],
  });
});

• 출처 https://devmoony.tistory.com/93