DataTables 사용법 및 예제 JSON, jQuery - Grid 라이브러리

DataTables 사용법 및 예제

 

 

✔️ DataTables는 <table>을 그리드 형식으로 사용하고 표시 건수 제어, 페이징, 정렬, 검색, 필터, 스크롤 기능 등을 제공하는 라이브러리다.

DataTables는 서버에서 데이터를 JSON으로 받아 표시할 수 있으며,

아래와 같은 기능이 제공되어 추가할 수 있다.

- 표시 건수 제어 기능
- 검색 기능
- 정렬 기능
- 필터 기능
- 스크롤 기능

 

DataTables - JSON 데이터 테이블에 출력하기

DataTables를 사용하기 위해서는 DataTables의 JS파일, CSS파일, jQuery를 필요로 합니다.

 

[
    {"id" : "JSON01", "name" : "제이슨01", "location" : "서울"},
    {"id" : "JSON02", "name" : "제이슨02", "location" : "경기도"},
    {"id" : "JSON03", "name" : "제이슨03", "location" : "충청남도"},
    {"id" : "JSON04", "name" : "제이슨04", "location" : "충청북도"},
    {"id" : "JSON05", "name" : "제이슨05", "location" : "전라도"},
    {"id" : "table01", "name" : "테이블01", "location" : "경상도"},
    {"id" : "table02", "name" : "테이블02", "location" : "강원도"},
    {"id" : "table03", "name" : "테이블03", "location" : "제주도"},
    {"id" : "table04", "name" : "테이블04", "location" : "울릉도"},
    {"id" : "table05", "name" : "테이블05", "location" : "해외"},
]

이와 같은 JSON데이터를 받아 테이블에 DataTables를 사용하여 출력한다고 가정하겠습니다.

 

<table id="data_list" class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>이름</th>
            <th>지역</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

먼저 HTML에 데이터를 넣어줄 테이블을 작성합니다.

이때 테이블의 헤더(<thead>)만 작성하고, 열의 개수는 JavaScript의 columns에서 설정한 개수와 같게 작성해 줍니다.

 

그리고 DataTables JS파일에서 아래와 같이 .DataTable의 파라미터로 전달합니다.

$("#data_list").DataTable({
    ajax: { url: "data.json", dataSrc: '' },
    columns: [
        { data: "id" },
        { data: "name" },
        { data: "location" }
    ]
});

 

 

기능 및 표시 기능 숨기기

DataTables는 기본적으로 표시 건수, 검색, 정렬, 정보 표시, 페이징 기능이 추가되어 표출됩니다.

 

---

 

번호	항목	내용
1	표시 건수	10, 25, 50, 100건 단위로 표시
2	검색	출력된 표에서 검색 가능
3	정렬	오름차순, 내림차순으로 정렬
4	정보 표시	표시 건수 등 여러 정보를 표시
5	페이징	1페이지, 2페이지... 등

 

기능이 필요하지 않는 경우에는 기능을 숨길 수 있습니다.

$("#data_list").DataTable({
    // 표시 건수기능 숨기기
    lengthChange: false,
    // 검색 기능 숨기기
    searching: false,
    // 정렬 기능 숨기기
    ordering: false,
    // 정보 표시 숨기기
    info: false,
    // 페이징 기능 숨기기
    paging: false
});

 

 

최초 표시시 정렬하기

DataTables는 초기에 표시할 때 정렬을 시켜 표시하도록 설정이 가능합니다.

 

$("#data_list").DataTable({
    // 2번째 항목을 오름 차순 
    // order : [ [ 열 번호, 정렬 순서 ], ... ]
    // "asc":오름차순, "desc":내림차순
    order: [ [ 1, "asc" ] ] 
});

 

✔️ order는 [[열 번호, 정렬 순서], ...] 형식으로 설정하여 전달합니다.

열 번호는 배열의 index 번호처럼 0 부터 시작합니다. 즉, 0은 1번째 항목, 1은 2번째 항목

정렬 순서는 오름차순은 "asc", 내림차순은 "desc"로 전달합니다.

정렬 하고자 하는 항목을 복수로 설정하여 정렬하고 싶은 경우에는 아래와 같이 설정합니다.

 

👉 1번째 항목은 내림차순 + 2번째 항목은 오름차순

order:[ [ 0, "desc" ], [ 1, "asc"] ]

 

👉 초기 표시 시 정렬하지 않음

order: []

 

 

스크롤바 설정 (scrollX, scrollY)

표가 화면보다 큰 경우 스크롤바를 추가로 설정할 수 있습니다.

 

✔️ 가로 스크롤바는 scrollX

✔️ 세로 스크롤바는 scrollY

$("#data_list").DataTable({
    // 가로 스크롤바
    // 설정 값은 true 또는 false
    scrollX: true,

    // 세로 스크롤바
    // 설정 값은 px단위
    scrollY: 500
});

 

 

 

DataTables의 넓이 설정

테이블의 칼럼 넓이를 직접 설정할 수 있습니다.

 

✔️ 넓이를 설정할 때 columnDefs 를 사용합니다.

$("#data_list").DataTable({
    
    // 열 넓이 설정 columnDefs 사용
    columnDefs: [
        // 1번째 항목 넓이를 120px로 설정
        { targets: 0, width: 120 }
    ]
});

종류	내용	예
숫자	정해진 번호를 설정	targets : 0
배열	복수 사용 시 배열 이용	targets : [0, 1, 2]
문자열	설정한 클래스명 설정	targets : "name"

 

 

DataTables 칼럼 항목 숨기기 기능

표에는 표시할 필요가 없는 데이터이지만 값을 저장해둬야 하는 항목과 같은 경우에 유용하게 이용가능할 것 같습니다.

 

✔️ 이 경우에도 columnDefs 를 사용합니다.

$("#data_list").DataTable({
    // 열 설정
    columnDefs: [
        // 1번재 항목 열을 숨김
        { targets: 0, visible: false },
    ]
});

 

 

 

표시 건수 설정(lengthMenu/displayLength)

한 페이지에 보여줄 데이터의 개수를 설정할  수 있습니다.

 

✔️ 표시 건수 단위는 lengthMenu

✔️ 표시할 때 보여줄 기본 값은 displayLength

$("#data_list").DataTable({
	// 표시 건수를 10건 단위로 설정
	lengthMenu: [ 10, 20, 30, 40, 50 ],

	// 기본 표시 건수를 20건으로 설정
	displayLength: 20, 
});

 

이상 DataTables의 기본 사용방법이였습니다.

 

datatables.net/

DataTables | Table plug-in for jQuery

 

---