상세 컨텐츠

본문 제목

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

Development Study/잡기술

by yooputer 2025. 1. 13. 16:05

본문

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

Reference This reference details the public APIs that DataTables and its extensions present, with all of the information that you, the developers using DataTables, need to be able to interact with the table programmatically. The manual summarises how the A

datatables.net

 

관련글 더보기