[javascript] DataTables를 사용하여 데이터를 어떻게 표시하나요?

30 Nov 2023

javascript

DataTables는 JavaScript 라이브러리로, 테이블 형태의 데이터를 쉽게 표시하고 상호작용할 수 있도록 도와줍니다. DataTables를 사용하여 데이터를 표시하는 방법에 대해 알아보겠습니다.

먼저, DataTables 라이브러리를 프로젝트에 추가해야 합니다. 아래의 스크립트 태그를 <head> 태그 안에 추가하여 DataTables를 가져올 수 있습니다.

<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">

다음으로, 표시할 데이터가 포함된 HTML 테이블을 준비해야 합니다. 예를 들어, 아래와 같은 테이블이 있다고 가정해보겠습니다.

<table id="myTable">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>개발자</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>디자이너</td>
    </tr>
    <!-- 나머지 데이터 행들 -->
  </tbody>
</table>

이제 JavaScript 코드를 작성하여 DataTables를 초기화하고 표시할 데이터를 설정해보겠습니다.

$(document).ready(function() {
  $('#myTable').DataTable();
});

위의 코드는 문서가 로드되면 ($(document).ready) #myTable ID를 가진 테이블을 DataTables로 초기화하는 역할을 합니다.

이제 테이블이 DataTables로 변환되었습니다! DataTables는 데이터를 표시하는 데 필요한 모든 기능을 제공합니다. 예를 들어, 정렬, 검색, 페이징 등의 기능을 사용할 수 있습니다.

또한, DataTables를 커스터마이징하여 색상, 스타일, 테마 등을 변경할 수도 있습니다. 자세한 내용은 DataTables 공식 문서를 참조하시기 바랍니다.

참고 문서: