본문 바로가기
Web

[Web][Datatables] 데이터테이블즈(datatables) 메뉴얼 정리 v2.0

by Real Iron 2019. 1. 21.

이 글은 datatables 1.10.19 기반으로 작성되었습니다


이번 시간에는 datatables 정리하도록 하겠습니다.

요즘은 게시판을 직접적으로 코딩하지않고 datatables라는 라이브러리를 사용해서 게시판을 만듭니다.

datatables는 직접 구현한 게시판보다 훨씬 좋고 커스텀마이징도 좋습니다.


1. datatables 공식홈페이지


https://datatables.net/


2. datatables CDN

css
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css"/>

JS
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript" ></script>

3. datatables 처리모드


datatables에는 두 가지 처리 방법이 있습니다

datatables 뿐만 아니라 게시판 처리 방식에 두 가지 방법이 있는 것입니다.


"클라이언트 사이드 렌더링"


"서버사이드 렌더링"


위 두 가지 방법입니다


게시판 관점에서 바라 본 클라이언트 사이드 렌더링

게시판 관점에서 바라봤을 때 "클라이언트 사이드 렌더링" 은 초기 페이지 로딩 시 모든 데이터를 가져와서 페이지 블럭단위만 보여준 후

나머지는 가리는 방식입니다. 따라서 페이지 전환 시 서버 호출이 일어나지 않으며 오버헤드가 없기 때문에 초기 로딩을 제외하면 속도 이슈가 없습니다.


게시판 관점에서 바라 본 서버 사이드 렌더링

일반적으로 게시판을 만들게 되면 "서버 사이드 렌더링"으로 만들게 됩니다.

쉽게 페이지 전환이 일어날 경우 페이지 번호를 서버측으로 넘긴 후 특정 블럭만 가져와서 출력해주는 방식입니다

초기 로딩시에도 페이지 단위의 데이터만 가져오기 때문에 리퀘스트 오버헤드를 제외하면 평균적인 속도를 얻어낼 수 있습니다


위와 같이 datatables 또한 두 가지 방식을 제공합니다.


if you are working with less than 10,000 rows use client-side processing, for greater than 100,000 rows use server-side processing


datatables 공식 메뉴얼에서는 데이터가 10000건 이하일 때는 클라이언트 사이드 렌더링을 사용해도 된다고 권장하고있습니다.

하지만 데이터가 100,000건 이상이 넘어가면 무조건 서버 사이드 렌더링을 사용하라고 권장하고있습니다


4. datatables 데이터 사용하기


기본적으로 datatables는 tbody에 있는 tr을 기반으로 자동으로 게시판을 만들어줍니다.

tbody에 있는 tr기반이 아닌 data 속성을 이용해서도 게시판을 만들어줄 수 있는데 그 때 사용하는 데이터타입이 3종류 있습니다.

이번 포스팅에서는 가장 많이쓰는 두 가지 종류만 설명하도록 하겠습니다


< 그림4.1 배열 and 배열 기반 >


 

< 그림4.2 배열 and 오브젝트 기반>


밖에만 배열로 선언해준 후 내부에는 오브젝트를 사용하던 배열을 사용하던 상관이 없습니다.

다만! 오브젝트 기반으로 데이터타입을 사용할 경우 오브젝트는 순서를 가지고 있는 자료형이 아니기 떄문에

columns라는 속성을 사용해 순서를 명시해줘야합니다


 

< 그림4.3 오브젝트 기반으로 사용할 경우 colums를 사용하여 순서 명시>


5. datatables 살펴보기


< 그림5.1 CDN 선언 >


우선 cdn을 html에 명시해줍니다.


< 그림5.2 table 태그를 이용한 기본적인 테이블 작성 >


table과 tr, td를 작성해줍니다

for문은 각 언어 템플릿에 제공하는 걸 사용해주면 됩니다

( for문을 안돌리고 하드로 박아도 됨 )

저는 django의 makotemplate을 사용해줬습니다

< 그림5.3 table 태그를 이용한 기본적인 테이블 결과 >


그러면 위 사진같이 테이블이 나오는데 여기에 스크립트를 하나 먹여주면 게시판으로 변합니다


< 그림5.4 datatables 기본 사용 >


주의 : jquery 로 작성되었기 때문에 jquery CDN을 로드해줘야합니다


< 그림5.4 datatables 결과 > 


간단하게 게시판으로 만들어졌으며

데이터테이블즈의 기본 속성들로만 구성된 게시판입니다.

기본은 클라이언트 사이드입니다.


6. datatables 기본 속성 커스텅마이징 (enble / disable)



 

< 그림6.1 datatables 옵션 커스텀마이징 > 


하나하나 찾아서 정리했습니다.


기본 속성으로 true 값을 가지고 있으나 false로 변경할 경우 보이지 않게 됩니다.


paging = 페이징을 할 것인가...?

ordering = 컬럼 클릭 시 오더링을 적용할 것인가...?

info = 페이지 상태에대한 정보를 표시할 것인가...?

filter = 검색창을 보여줄 것인가...?

lengthChange = 블록 단위 변경 기능을 사용할 것인가...?

order = 기본 컬럼 정렬 설정


7. datatables 기본 속성 커스텅마이징 (DOM position)


 

< 그림6.1 datatables DOM > 


dom 속성을 사용하면 6개의 컴포넌트의 위치를 변경할 수 있다.


속성 정의

length = l

filter = f

info - i

paging = p

table = t

processing = r


위 예제 정리

length filter

<top>

table

processing

<buttom>

info paging


만약 search와 paging이 위치를 변경하고 싶다면...?


변경전

"dom": '<"top"lf>rt<"bottom"ip>',



변경후

"dom": '<"top"lp>rt<"bottom"if>',



8. datatables 기본 속성 커스텅마이징 (페이징 저장)



클라이언트 사이드 렌더링의 경우 새고로침 시 페이징 현재 상태가 저장되지 않으나

stateSave를 true로 활성화할 경우 새로고침 시에도 페이징 현재 상태가 저장되어 유지됨


9. datatables 기본 속성 커스텅마이징 (페이징 타입)


 


페이징 타입은 총 6개의 타입이 존재합니다


numbers


simple



simple_numbers


full


full_numbers


first_last_numbers
 


10. datatables 기본 속성 커스텅마이징 (스크롤)



scrollX 는 x 축 스크롤을 활성화 할지의 여부이다.

scrollY 는 y 축의 스크롤의 크기

scrollCollapse 가 y 축의 스크롤을 활성화

당연히 스크롤을 활성화 하면 paging이 일어나면 안되므로  paging은 false로 바껴야한다.


 

11. datatables 기본 속성 커스텅마이징 (언어 변경)



 lengthMenu

 lengthMenu에 표기되는 언어 _MENU_ 는 변수로 사용됨

 zeroRecords

 데이터가 0건일 때 테이블에 보여지는 문구

 info

 info에 표기되는 언어 _PAGE_, _PAGES_ 는 변수로 사용됨

 infoEmpty

 데이터가 0건일 때 info에 보여지는 문구

 infoFiltered 

 검색시 info에 표기되는 언어

 first

 처음 <- 언어 변경 가능

 last

 마지막 <- 언어 변경 가능

 previos

 이전 <- 언어 변경 가능

 next

 다음 <- 언어 변경 가능


12. datatables click event 시 seq 얻어내기


 $(document).ready(function() {

    var table = $('#example').DataTable();
     
    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );


13. datatables 컬럼 렌더링



$(document).ready(function() {
    $('#example').DataTable( {
        "columnDefs": [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return data +' ('+ row[3]+')';
                },
                "targets": 0
            },
            { "visible": false,  "targets": [ 3 ] }
        ]
    } );
} );
 


14. datatables 컬럼 및 삭제


https://datatables.net/examples/api/select_row.html


15. datatables ajax (array or object)


array

https://datatables.net/examples/ajax/simple.html


object

https://datatables.net/examples/ajax/objects.html


16. datatables serverside rendering


https://datatables.net/examples/server_side/simple.html



html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>datatables</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css"/>
</head>

<body>

<table id="example" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript" ></script>

<!-- excel -->
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript" ></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){

$('#example').DataTable(
{
// datatables -> default
"dom": '<"top"Blf>rt<"bottom"ip>',
"paging" : true,
"ordering" : true,
"info" : true,
"filter" : true,
"lengthChange" : true,
"order" : [[ 0, "desc" ]],
"stateSave" : false,

// datatables -> paging type
// numbers simple simple_numbers full full_numbers first_last_numbers
"pagingType" : "full_numbers",
"pageLength": 10,
"lengthMenu": [[10, -1], [10, "All"]],

// datatables -> server side
"processing": true,
"serverSide": true,

// datatables -> ajax data
"ajax": {
url: "/sample",
type: "POST",
dataType: "json",
data: {},
dataSrc: function (data) {
console.log(data.return);
return data.return;
}
},

// datatables -> scroll
//"scrollX": false,
//"scrollCollapse": true,
//"scrollY": "200px",

// datatables -> language
"language": {
"lengthMenu": "Display _MENU_ records per page",
"zeroRecords": "Nothing found - sorry",
"info": "Showing page _PAGE_ of _PAGES_",
"infoEmpty": "No records available",
"infoFiltered": "(filtered from _MAX_ total records)",
"paginate": {
"first": 'first',
"last": 'last',
"previous": "prev",
"next": "next"
}
},

// datatables -> excel
"buttons": [{
extend: 'excelHtml5',
customize: function ( xlsx ){
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r*="10"]', sheet).attr( 's', '25' );
}
}]
}
);
});
</script>

</body>
</html>
 

views.py
#-*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from django.views.decorators.csrf import csrf_protect, csrf_exempt

@csrf_exempt
def sample(request):

if request.is_ajax():

start = int(request.POST.get('start'))
print("start -> ", start)

length = int(request.POST.get('length'))
print("length -> ", length)

# sample data
data = []
for n in range(0,50):
data.append([n,'2','3','4','5','6'])

data = data[start:(start+length)]
return JsonResponse({'return':data})

context = {}
return render(request, 'sample/sample.html', context)
 

[출처] 데이터테이블즈(datatables) 메뉴얼 정리 v2.0|작성자 해피용

관련글

티스토리툴바