들어가기
jQuery를 사용할 때에 데이터를 테이블 형태로 표시할 때 많이 쓰는 테이블 컨트롤이다. 기능도 다양하고 커스터마이징도 가능하며 라이센스도 MIT라서 걱정없이 사용할 수 있다. 흔히 datatables를 데이터를 가져와서 사용하는 방식으로 많은 데이터를 표현하기 힘들다. datatables에서 내부적으로 ajax를 활용해 페이징 처리할 수 있는 기능이 있다. 한번 알아보자.
작성자: ospace114@empal.com, http://ospace.tistory.com/
HTML 구성
datatables을 사용했던 분이라면 이미 알고 있겠지만 jquery을 로딩해야 한다.
<html>
<head>
<link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display nowrap" width="100%"></table>
</body>
</html>option: serverSide
자동으로 테이블에서 필요한 조건 데이터를 생성해서 요청하는 기능이다. datatables의 옵션에서 serverSide을 true로 활성화해줘야 서버에서 처리 요청을 보낼 수 있다.
화면에서 검색 조건, 페이징, 컬럼 정렬 등에 조작을 할 경우 서버로 요청을 보내 해당 조건에 맞는 데이터를 화면에 표시해준다. 기존에 자잘한 처리 작업을 한번에 모두 제공해준다.
$('#table').dataTables({
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' },
],
processing:true,
serverSide:true,
ajax: {
url: '/api/data',
data: data => JSON.stringify(data),
contentType: 'application/json',
dataType: 'json'
}
});serverSide를 true로 활성화해야 서버로 검색 조건을 보내고 응답을 가지고 화면에 표시할 수 있다. 그리고 ajax는 서버로 메시지 요청을 보내는 부분으로 json 포멧을 요청을 보낸다. 기본은 application/x-www-form-urlencoded 타입으로 인코딩되는데 서버에서 메시지로 저장하는데 문제가 있다. 그래서 위의 예처럼 json으로 요청을 보내야 한다.
요청 메시지
화면에서 입력된 내용을 서버로 보내는 요청 메시지 구조이다.
- draw: integer형, 요청 순서로 응답 식별 용으로 활용
- start: integer형, 화면에 표시될 첫번째 레코드 인덱스
- length: integer형, 화면에 표시될 레코드 개수
- columns: object 형, 컬럼별 검색 조건
- data: string 형, 컬럼 데이터 소스
- name: string 형, 컬럼 이름
- searchable: boolean 형, 컬럼이 검색 가능 여부
- orderable: boolean 형, 컬럼이 정렬 가능 여부
- search: object형, 아래 search 참고
- search: object 형, 검색 조건
- value: string 형, 검색할 값
- regex: boolean 형, 검색할 값이 정규식 여부
- order: 배열형
- column: integer 형, 정렬을 적용할 컬럼 인덱스
- dir: string 형, asc 또는 desc
요청 메시지에 있는 각 항목은 화면 구성요소(Fig 01)를 참고하면 쉽게 이해할 수 있다.
서버에서는 요청 메시지를 받아서 데이터를 가공해서 응답해줘야 한다.
응답 메시지
서버에서 응답 메시지 구조이다.
- draw: integer형, 서로 요청과 응답을 확인용
- recordsTotal: integer형, 필터되기 전에 총 레코드 수
- recordsFiltered: integer형, 필터된 총 레코드 수(검색조건)
- data: 배열, 실제 데이터(앞의 length 만큼 반환)
- errror: 문자열, 에러가 발생할때 에러 메시지
응답 메시지에서 data 속성의 데이터 구조는 브라우저에서 처리하는 방식에 따라 달라질 수 있다.
마무리
datatables은 그리드 형태 데이터를 쉽게 화면에서 출력하고 페이징, 정렬, 검색을 제공한다. serverSide 옵션이 있어서 쉽게 서버와 연동할 수 있다. 그러나 메시지 구조나 응답 형태가 정해져 있기 때문에 기존 메시지 규약과 달라서 적용하기 힘들 수도 있다. 하지만, 그런게 없다면 생각하거나 고민 필요없이 그냥 따라서 잘 쓰면 된다. 물론 요청/응답 메시지도 변환을 통해서 처리할 수 있다. 혹시나 도움이 될까해서 정리해봅니다. 여러분에게 도움이 되었으면 합니다. 모드 즐거운 코딩생활 하세요. ^^ ospace.
참고
[1] Server-side processing, https://datatables.net/manual/server-side
'3.구현 > HTML5&Javascript' 카테고리의 다른 글
| [javascript] IndexedDB 라이브러리 소개 (0) | 2024.01.23 |
|---|---|
| [javascript] Javascript에서 MD5 사용 (0) | 2024.01.20 |
| [javascript] Underscore 성능 (0) | 2024.01.18 |
| [HTML5] tistory에서 카테고리 선택 팝업창 추가 (0) | 2024.01.15 |
| [Javascript] Javascript의 prototype에 대한 고찰 (0) | 2024.01.11 |
