Jquery datatable

Jquery DataTables

• dataTables은 데이터를 테이블로 쉽게 표현하고 다양한 기능을 제공하는 라이브러리,
• https://datatables.net/ 참조

DataTables 사용 방법

• DataTables를 사용하기 위해서는 css와 js파일을 추가
  • url

    https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css

    https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

사용 예제

• 간단한 테이블을 만드는 예제

1) html 코드

- 테이블 헤드정보(thead) 와 바디(tbody) 기술

  
<table id="exampleTable" class="table table-bordered">
  <thead>
    <tr>
      <th>Seq</th>
      <th>Name</th>
      <th>Age</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="data : ${serverData}">
      <td th:text="${data.seq}></td>
      <td th:text="${data.name}></td>
      <td th:text="${data.age}></td>
      <td th:text="${data.date}></td>
    </tr>
  </tbody>
</table>

2) js 코드

  - 간단한 코드 1줄 임.

  
$("#exampleTable").DataTable({ });

• .DataTable() 명령어로 기본적인 옵션을 가진 테이블 생성.
• 다양한 option을 통해 테이블의 기능을 활성, 비활성 또는 커스터마이징 할 수 있음
  • 예를 들어 paging을 비활성화 하고 싶다면 (paging은 디폴트 값은 true)

  
$("#exampleTable").DataTable({
  paging: false
});

• 옵션 디폴트 값 및 종류는 가이드를 참고

  https://datatables.net/reference/option/

---

jQuery DataTable 기본으로 표시되는 항목(행) 수 변경

• pageLength 옵션을 사용하여 변경
• 테이블이 처음 로드될 때 몇 개의 행을 보여줄지 설정

기본 갯수 변경 예시

$(document).ready(function() {
    $('#example').DataTable({
        "pageLength": 10 // 기본 표시 갯수를 10으로 설정
    });
});

• pageLength: 한 페이지에 표시할 기본 항목 수를 지정
  • 기본값은 10이지만, 원하는 숫자로 변경 가능 25, 50 등을 설정.

더 많은 옵션과 함께 설정하는 예시

$(document).ready(function() {
    $('#example').DataTable({
        "pageLength": 25,  // 기본 표시 갯수를 25로 설정
        "lengthMenu": [ [10, 25, 50, 100], [10, 25, 50, 100] ] // 선택할 수 있는 항목 갯수 메뉴
    });
});

• lengthMenu: 사용자가 페이지당 표시할 행 수를 선택할 수 있는 드롭다운 메뉴를 제공.
  • 첫 번째 배열은 설정할 수 있는 숫자
  • 두 번째 배열은 해당 숫자의 레이블

실시간으로 기본 갯수 변경

• 만약 테이블이 이미 초기화된 후에 기본 표시 항목 수를 변경

var table = $('#example').DataTable();
table.page.len(50).draw(); // 표시할 기본 항목 수를 50으로 변경