jQuery: DataTables 사용법 및 예제

jQuery 기반의 데이터 그리드 라이브러리인 DataTables의 기본 사용법과 옵션 설정, 스크롤, 열 너비/비표시 설정, JSON 데이터 바인딩 방법 정리입니다.

1. DataTables 라이브러리 로드 및 기본 테이블 초기화

CDN을 통해 jQuery 및 DataTables CSS/JS를 로드한 뒤 기본적인 HTML 테이블에 DataTables를 적용합니다.

<!-- CDN 라이브러리 로드 -->
<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 id="foo-table" class="table table-bordered">
  <thead>
    <tr><th>No</th><th>지역선택</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>서울</td></tr>
    <tr><td>2</td><td>경기도</td></tr>
  </tbody>
</table>

<!-- 기본 초기화 JS -->
<script>
  jQuery(function($){
    $("#foo-table").DataTable();
  });
</script>

2. 주요 기능 제어 및 스크롤·열 옵션

검색, 페이징, 정렬 등의 기본 기능을 숨기거나 스크롤바, 열 너비/숨김, 상태 저장(stateSave) 옵션을 설정할 수 있습니다.

$("#foo-table").DataTable({
  // 기능 숨기기 옵션
  lengthChange: false, // 표시 건수 제어 비활성화
  searching: false,    // 검색 기능 비활성화
  ordering: false,     // 정렬 기능 비활성화
  info: false,         // 하단 정보 표시 비활성화
  paging: false,       // 페이징 비활성화

  // 초기 정렬 설정 (1번째 열 오름차순, 2번째 열 내림차순)
  order: [[ 0, "asc" ], [ 1, "desc" ]],

  // 스크롤바 및 상태 저장
  scrollX: true,       // 가로 스크롤
  scrollY: 200,        // 세로 스크롤 (px)
  stateSave: true,     // 페이지, 정렬 상태 유지

  // 표시 건수 설정
  lengthMenu: [ 10, 20, 30, 50 ],
  displayLength: 20,

  // 특정 열(Column) 옵션 지정
  columnDefs: [
    { targets: 0, visible: false }, // 1번째 열 숨김
    { targets: 1, width: 100 }       // 2번째 열 너비 설정
  ]
});

3. JSON 파일/Ajax 데이터 동적 바인딩

서버 측에서 전달되는 JSON 데이터를 바인딩하여 동적으로 테이블을 구성하는 방법입니다.

// Ajax를 이용한 JSON 연동 (HTML에는 만 작성)
$("#foo-table").DataTable({
  ajax: { 
    url: "data.json", 
    dataSrc: '' 
  },
  columns: [
    { data: "id" },
    { data: "name" }
  ]
});

 

▶