Skip to content

dataTables #
Find similar titles

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 값으로 함

Incoming Links #

Related Data Sciences #

0.0.1_20210630_7_v33