Skip to content

dataTables #

Find similar titles

6회 업데이트 됨.

Edit
  • 최초 작성자
  • 최근 업데이트
    jmchoi

Structured data

Category
Programming

DataTables #

  • HTML의 table을 데이터 그리드 형식으로 사용하기 위한 라이브러리
  • MIT 라이센스와 jQuery 사용

dataTables의 장점 #

  • table그리드의 기능을 빠르게 구현
    • 표시 건수 제어 가능
    • 페이징 기능
    • 정렬 기능
    • 스크롤 기능
  • 서버에서 json 데이터를 받아 표시할 수 있음
  • bootstrap을 적용하여 디자인이 깔끔
  • 여러 옵션을 제공하여 사용자 편의에 용이(https://datatables.net/)

시작 #

html #

 <table id = "dataTable>
    <thead>
        <tr>
            <th>컬럼1</th>
            <th>컬럼2</th>
            <th>컬럼3</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
 </table>

js #

<script>
    $('#dataTable').DataTable({
        ajax : {
            method : "POST",
            url : "서버URL주소",
            data : function(d) { // d -> 기본 datatable 파라미터
                return d;
            }
        },
        columns : [
            {data : "컬럼1"},
            {data : "컬럼2"},
            {data : "컬럼3"}
        ]
    })
</script>
  • 비동기를 이용하여 원하는 데이터를 json 데이터로 가져온 후 위 코드와 같이 사용

serverSide #

  • dataTables는 서버에서 가져온 데이터를 설정한 옵션에 맞게 그리드 형태로 그려주는 라이브러리이므로 대용량의 데이터를 가져와 표시할 때는 속도 저하의 이슈가 있음
  • 페이지 정보와 표시 건수 및 검색 조건 등의 데이터를 parameter로 보낸 후 서버에서 정제하여 원하는 만큼의 데이터를 가져와 사용할 때 serverSide 옵션을 사용

    <script>
        $('#dataTable').DataTable({
            ajax : {
                method : "POST",
                url : "서버URL주소",
                data : function(d) { // d -> 기본 datatable 파라미터
                    return d;
                }
            },
            serverSide : true,
            columns : [
                {data : "컬럼1"},
                {data : "컬럼2"},
                {data : "컬럼3"}
            ]
        })
    </script>
    
    • 이때 서버에서는 조회 하고자 하는 데이터의 전체 row 수를 함께 전송해야 하고 표시한 데이터의 key는 data, row 수의 key는 recordsTotal 값으로 함

Option #

  • DataTables의 다양한 옵션 기능으로 편리하게 테이블을 구성 가능

    <script>
        $('#dataTable').DataTable({
            //옵션
            "destroy" : true, //테이블 재생성
            "paging": true, //페이징처리
            "ordering": true, //칼럼별 정렬기능
            "autoWidth": false, //가로자동
            "lengthChange": true, //데이터건수 변경
            "pageLength": 50, //기본 데이터건수
            "order": [15,'desc'], //기본 정렬칼럼
            "searching": false, //검색
            "scrollX": true, //가로 스크롤
            serverSide : true, //서버사이드
    
            ...
        })
    </script>
    

Button #

  • DataTables를 이용해 복사하기/엑셀로 저장하기/PDF로 저장하기/프린트하기 버튼 생성 가능
  • 해당 부분의 옵션으로 주면 간단하게 적용할 수 있다. 만약 오류가 발생하거나 아무 버튼이 동작하지 않는다면 필요한 js 파일을 정상적으로 불러왔는지 확인이 필요하다.

    <script>
        $('#myTable').DataTable( {
            buttons: [
                {
                    extend: 'copy',
                    text: 'Copy to clipboard'
                },
                'excel',
                'pdf'
            ]
        });
    </script>
    

Image

Incoming Links #

Related Data Sciences #

0.0.1_20230725_7_v68