[datatables.js] 주요 특징과 기능, 사용법, ajax 연동

datatables.js란? 

• HTML 테이블보다 인터랙티브하고 기능적으로 확장 할 수 있게 도와주는 자바스크립트 플러그인

---

주요 특징과 기능

1. 검색 및 필터링: 사용자 입력에 따라 테이블 데이터를 즉시 검색하고 필터링할 수 있습니다. 이는 클라이언트 측에서 이루어지므로 매우 빠르게 작동합니다.
2. 정렬: 특정 열의 데이터를 오름차순 또는 내림차순으로 정렬할 수 있습니다. 기본적으로 숫자, 문자열, 날짜 등의 데이터 유형을 인식하여 적절하게 정렬합니다.
3. 페이징: 테이블 데이터가 많은 경우 페이지 나누기를 통해 데이터를 나누어 표시할 수 있습니다. 사용자는 페이지 번호를 클릭하여 테이블의 다른 부분을 볼 수 있습니다.
4. Ajax 데이터 로딩: 서버 측에서 데이터베이스와 통합하여 데이터를 가져올 수 있으며, 이 데이터를 비동기적으로 테이블에 로드할 수 있습니다. 이를 통해 대량의 데이터도 효율적으로 처리할 수 있습니다.
5. 다양한 플러그인 및 확장 기능: 기본 기능 외에도 버튼 추가, 행 편집, 행 그룹화, 고정 헤더 등의 확장을 제공하여 다양한 요구에 맞게 테이블을 커스터마이즈할 수 있습니다.
6. 반응형 디자인: 반응형 레이아웃을 지원하여 다양한 디바이스에서 테이블을 적절하게 렌더링할 수 있습니다.

---

사용법

1. HTML Table 태그 작성

<table id="table1">
        <thead>
            <tr>
                <th>이름</th>
                <th>직업</th>
                <th>나이</th>
                <th>시작일</th>
                <th>급여</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>홍길동</td>
            <td>개발자</td>
            <td>29</td>
            <td>2019/01/15</td>
            <td>$3200</td>
        </tr>
        </tbody>
    </table>

 

2. 라이브러리 import

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>

3. DataTable 초기화

<script>
    $(document).ready(function() {
        renderTable();
    });

    function renderTable(){
        $('#table1').DataTable();
    }
</script>

---

결과

왼쪽 : DataTable 적용 전, 오른쪽 : DataTable 적용 후

---

초기화 옵션

옵션명	설명	기본값	예시
paging	페이징 기능 활성화 여부	true	true, false
lengthMenu	페이지당 표시할 데이터수 설정		[[10, 25, 50, -1], [10, 25, 50, '모두 보기']]
pageLength	기본 페이지당 행 수	10	10
searching	검색 기능 활성화 여부	true	true, false
ordering	열 정렬 기능 활성화 여부	true	true, false
order	초기 정렬 상태		[[0, 'asc']]
info	테이블 정보 표시 활성화 여부	true	true, false
autoWidth	자동 열 너비 조정 활성화 여부	true	true, false
ajax	Ajax 요청을 통해 데이터를 로드하는 URL 또는 설정 정의
columns	열 정의, 각 열의 옵션 추가		[{ title: "이름" }, { title: "직업" }]
columnDefs	특정 열에 대한 정의		[{ targets: 0, visible: false }]
dom	테이블 레이아웃 정의 (버튼, 필터, 테이블, 페이지 정보 등)
language	테이블 출력 언어 및 문구 설정		{ search: "검색: " }
responsive	반응형 레이아웃 활성화 여부		true, false
scrollY	수직 스크롤 바를 추가하여 특정 높이 설정		400px
deferRender	대량 데이터를 처리하는 경우 페이징시 렌더링을 지연시켜 성능 개선

---

데이터 세팅

데이터가 array인 경우

    const employeeInfoArray = [
        ['홍길동', '개발자', 29, '2019/01/15', '$3200'],
        ['김영희', '디자이너', 34, '2020/03/25', '$2800'],
        ['이철수', 'QA 엔지니어', 27, '2021/05/10', '$2500'],
        ['박지민', '프로덕트 매니저', 32, '2018/09/20', '$4500'],
        ['최수정', '마케팅 전문가', 30, '2022/02/14', '$3100'],
        ['이민호', '프론트엔드 개발자', 26, '2019/11/11', '$3050'],
    ];

    function renderTable(){
        $('#table1').DataTable({
            data: employeeInfoArray
        });
    }

---

데이터가 obejct인 경우

const employeeInfoArray = [
    { name: '홍길동', role: '개발자', age: 29, startDate: '2019/01/15', salary: '$3200' },
    { name: '김영희', role: '디자이너', age: 34, startDate: '2020/03/25', salary: '$2800' },
    { name: '이철수', role: 'QA 엔지니어', age: 27, startDate: '2021/05/10', salary: '$2500' },
    { name: '박지민', role: '프로덕트 매니저', age: 32, startDate: '2018/09/20', salary: '$4500' },
    { name: '최수정', role: '마케팅 전문가', age: 30, startDate: '2022/02/14', salary: '$3100' },
    { name: '이민호', role: '프론트엔드 개발자', age: 26, startDate: '2019/11/11', salary: '$3050' },
];

function renderTable(){
    $('#table1').DataTable({
        data: employeeInfoArray,
        columns : [
            {data: 'name'},
            {data: 'role'},
            {data: 'age'},
            {data: 'startDate'},
            {data: 'salary'},
        ]
    });
}

---

column별 속성 지정

• columns, columnDefs 옵션에서 각 열마다 지정할 수 있는 속성은 다음과 같다

속성명	설명	기본값	예시
title	열 제목
data	해당 열에 사용할 데이터 정의. 기본적으로는 배열 인덱스이지만, 객체의 키 지정 가능		JSON 객체의 키명
render	데이터 표시 방식을 정의하는 함수		function(data, type, row) {}
visible	해당 열 노출 여부	false
searchable	해당 열 검색 기능 활성화 여부	true
orderable	해당 열 정렬 기능 활성화 여부	true
className	해당 열에 추가할 css 클래스
width	해당 열의 고정 폭		100px
defaultContent	해당 열에 값이 없을 때 기본값
targets	특정 열을 지정할 때 사용. 주로 columnDefs에서 사용.  int 혹은 int[] 입력시 해당 index 해당하는 row만, string 입력시 해당 name에 해당하는 row만 설정		1, 'name', [0, 4, 5]

 

예시 코드

$('#table1').DataTable({
    data: employeeInfoArray,
    columns :[
        {data: 'name'},
        {data: 'role', orderable: false},
        {data: 'age'},
        {data: 'startDate'},
        {data: 'salary', render: function (data, type, row) { return `$${data}`;} }
    ],
    columnDefs: [
        {target: [1, 2, 3, 4], searchable: false}
    ]
});

---

Ajax로 데이터 조회해서 세팅하기

• 'http://localhost:8081/indexData' api가 다음과 같은 JSON 데이터를 반환한다면,
  아래 코드와 같이 ajax 옵션을 사용하여 데이터를 세팅할 수 있다. 

$('#table1').DataTable({
            ajax: {
                url: 'http://localhost:8081/indexData',
                type: 'GET',
                dataSrc: ''
            },
            ...

---

공식문서

https://datatables.net/reference/

Reference