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>
  

Incoming Links #

Related Data Sciences (DataScience 0) #

• dataTables/absolute.js