<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>
<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>
<script>
$(document).ready(function() {
renderTable();
});
function renderTable(){
$('#table1').DataTable();
}
</script>
옵션명 | 설명 | 기본값 | 예시 |
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 | 대량 데이터를 처리하는 경우 페이징시 렌더링을 지연시켜 성능 개선 |
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
});
}
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'},
]
});
}
속성명 | 설명 | 기본값 | 예시 |
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로 데이터 조회해서 세팅하기
$('#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
Notion API 연동 데모 서버 실행해보기 | Notion Integration 생성/등록/연동 (1) | 2025.05.27 |
---|---|
백업테이블에서 변경사항 추출하여 UPDATE문 생성하는 쿼리(feat. GPT4) (0) | 2025.03.28 |
인텔리제이 단축키 모음 (0) | 2024.12.23 |
[JS, JQuery] 일자 여러개 입력받을 때 오늘 이후만, 중복 없이, 오름차순으로 입력받도록 input value range 세팅하기 (0) | 2024.12.20 |
[MyBatis] ArrayList 여러개를 하나의 반복문으로 순회하기 (1) | 2024.12.18 |