DataTable - JS 데이터 테이블 표현

Data를 테이블 표현하는 것은 모든 데이터 서비스의 기본이다. 매번 이 부분을 구현하고 검색하고, 페이지네이션에 Export 기능까지 따로따로 하는데 이 모든것이 이미 구현이 되어 있다. Datatable.net 꼭 이 라이브러리를 활용하자.

 

여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 )

 

DataTable 일단은 한번 보면 안다. 아래 예제 사이트로 가서 봐라 데이터를 표현하는 테이블은 이걸 써야 한다.

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

 

간단하게 Vue.js 를 이용하여 구현한 코드를 보자.

Django 에서 데이터를 가져와서 템플릿 렌더링을 위해서 아래와 같이 그려지는 코드에서..

    <!-- Projects table -->
    <table class="table align-items-center table-flush" id="stat_detail">
    <thead class="thead-light">
        <tr>
            <th scope="col">접속 일시</th>
            <th scope="col">접속 IP</th>
            <th scope="col">브라우저</th>
            <th scope="col">디바이스</th>
            <th scope="col">OS</th>
            <th scope="col">접속국가(코드)</th>
            <th scope="col">커스텀 트래킹</th>
        </tr>
    </thead>
    <tbody>
        {% for s in stats %}
        <tr>
            <td>{{ s.created_at | date:"Y-m-d H:i:s"}}</td>
            <td>{{ s.ip }}</td>
            <td>{{ s.web_browser }}</td>
            <td>{{ s.device }}</td>
            <td>{{ s.device_os }}</td>
            <td>{{ s.country_name }}({{ s.country_code }})</td>
            <td>{{ s.custom_params }}</td>
        </tr>
        {% endfor %}
    </tbody>
    </table>

// 그리는 코드
table_draw: function () {
        let statTable = $('#stat_detail').DataTable({
            dom: 'lBfrtip',
            buttons: ['copy', 'excel', 'pdf', "print"],
            responsive: true,
            "lengthMenu": [[10, 20, 30, -1], ["Ten", "이십", 30, "모두"]],
            "order": [[ 0, "asc" ], [ 1, "asc" ]]
        });
}

#stat_detail 부분은 DataTable 함수를 이용해서 그리게 된다.

 

옵션 부분을 보면, 

Excel, PDF, Print 내보내기 버튼을 나타나도록 했고

반응형으로

필드 길이를 정의하고, (-1 은 남는 길이가 되겠지)

ordering 을 표현할 수 있도록 

설정 되어 있다.

 

설치는 일단 CDN 정보가 install 페이지에 나와 있긴 하다.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>

 

버튼이나 모양이나 부트스트랩 같은 UI 버전에 맞는 설치내용을 아래 링크에서 확인할 수 있다.

 

https://datatables.net/download/release

Download individual release files

예로 Bootstrap4 에 버튼을 쓰려고 한다면,

 

DataTables 1.11.3 is the current stable release of DataTables.

CSS - https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css

JS - https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js

JS - https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js

이런 JS 라이브러리도 같이 import 해 줘야 한다.

 

실제 강의 코드에서 import 한 script 을 보면 아래와 같다.

 

<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

 

아무튼 결과를 예제로 보면,

 

DataTable 실제 예제 화면