JQuery DataTables라이브러리

후니·2023년 4월 26일
JavaScriptdataTablesjquery

자바스크립트

목록 보기
1/1

이번에 웹개발을 하던중 프론트쪽에 무료템플릿을 사용하였는데 그 안에 Datatables라이브러리가 포함되어 있었다. Jquery라이브러리 였는데 테이블을 쉽게 만들수 있는 라이브러러리 였고 현재 다양한 기술들을 사용해보는것을 목표로 하고 있기때문에 사용해보았다..

주문내역을 확인할수 있는 페이지를 만들었다.

  1. html파일에는 id가 dTabledls인 테이블을 작성해 놓아야 한다.
  2. jquery의 ready함수를 통해 문서가 준비되었을 때 실행하도록 한다.
$(document).ready(function() {
  let dTable = $('#dTable').DataTable({
    dom: '<"mb-2"B><"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
    buttons: [
      {
        extend: 'excel',
        text: '엑셀',
        className: 'btn-success',
        title: ''
      },
      {
        extend: 'excel',
        text: '엑셀2',
        className: 'btn-success',
        title: ''
      }
    ],
    searching: false,
    ajax: {
      'url' : '/member/getOrderList',
      'type' : 'POST',
      "data" : function ( d ) {
        d.status = $("#status").val(),
        d.startDate = $("#startDate").val(),
        d.endDate = $("#endDate").val(),
        d.select = $("#select").val(),
        d.search = $("#search").val()
      },
      'dataSrc' : '',
      'error' : function(xhr, error, thrown) {
        if(xhr.responseJSON.valid_startDate) {
          Swal.fire({
            text: xhr.responseJSON.valid_startDate,
            icon: 'warning',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '확인',
          });
        }else if(xhr.responseJSON.valid_endDate) {
          Swal.fire({
            text: xhr.responseJSON.valid_endDate,
            icon: 'warning',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '확인',
          });
        } 
      }
    },
    columns: [
      {data: 'no'},
      {data: 'name'},
      {data: 'phone'}, 
      {data: 'address'},
      {data: 'accountName'},
      {data: 'parcel'},
      {data: 'cashReceipts'},
      {data: 'plist'},
      {data: 'price'},
      {data: 'inTime'},
    ],
    columnDefs: [
      {
        targets: 8,
        render : $.fn.dataTable.render.number( ',' )
      }
    ],
    "footerCallback":function(){
      var api = this.api(), data;
      var result = 0;
      api.column(8, {search:'applied'}).data().each(function(data){
          result += parseFloat(data);
      });
      $(api.column(8).footer()).html(result.toLocaleString()+'원');
    },
    "order": [[3, 'desc']]
  });

dom 속성은 테이블의 레이아웃을 구성하는 데 사용되는 문자열이다. 이 속성을 사용하여 DataTables가 생성하는 DOM 요소를 구성할 수 있다.
"l": 페이지 길이 변경 요소를 나타내는 요소
"f": 필터링 요소
"t": 테이블 요소
"i": 테이블 정보 요소
"p": 페이지 번호 요소
"r": 처리 요소
"B": 버튼 요소

buttons 속성은 테이블의 툴바에 추가할 버튼을 구성하는 데 사용된다. 이 속성을 사용하여 버튼의 유형, 아이콘, 라벨 등을 설정할 수 있다.
extend: 'copy', 'excel', 'pdf' 등의 기능
text: 버튼 텍스트
classname: 버튼에 적용하는 css class
title: 엑셀 내용의 타이틀

searching 속성은 테이블 내 검색 기능을 사용할지 여부를 설정하는 데 사용된다.
속성을 false로 주고 검색기능은 직접 구현하는 방식으로 하였다.

ajax 속성은 서버 측에서 데이터를 가져오는 데 사용된다. 이 속성을 사용하면 테이블 데이터를 동적으로 로드할 수 있으며, 페이지 이동 없이도 데이터를 갱신할 수 있다.
url: 호출경로
type: GET 또는 POST
data: 서버로 넘겨줄 데이터, 상태와 검색시 데이터 넘겨주도록 했다.
dataSrc: 서버로부터 가져온 데이터에서 실제 데이터가 위치하는 속성 이름을 설정한다.
error: 에러 발생시 처리할 내용 작성하였다.

columns 속성은 테이블의 열(column)에 대한 설정을 정의한다. 이 속성은 각 열의 표시 이름, 데이터 소스, 표시 형식 등을 지정할 수 있다.

columnDefs 속성은 jQuery DataTables에서 열(column)에 대한 세부 설정을 제공하는 속성이다. 이 속성은 특정 열에 대한 클래스, 스타일, 이벤트 등을 정의할 수 있다.
9번째 컬럼에 금액 사이에 콤바를 넣도록 했다.

footerCallback 속성은 테이블 하단 엘리먼트에 대한 콜백 함수를 정의하는 속성이다.
금액의 총합을 계산하는 함수를 작성하였다.

마무리

벡엔드를 희망하는 나로써는 자주 접하는 기술은 아니라 크게 상관은 없었지만 이렇게 사용해보니 바닐라JS를 사용할때보나 나름 코드를 적게 적어도 돼서 편한 부분도 있었다. 하지만 요즘 jQuery가 점점 사용되지 않는 기술이라고 많이 들었다. jQuery가 사용되지 않는 이유는 크게 두 가지이다.

  1. jQuery는 브라우저의 기본 API에 비해 간편하고 유용한 기능들을 제공했다. 하지만 최근 브라우저의 내장 API들이 jQuery의 대부분 기능을 제공하게 되면서, jQuery의 필요성이 크게 감소하였고 브라우저 API 개선으로 인해 jQuery를 사용하지 않아도 되는 경우가 많아졌다.

  2. jQuery는 무겁고, 프로젝트의 사이즈가 커지면 사용자가 다운로드해야 할 자바스크립트 파일의 크기가 커지게 된다. 이는 초기 로딩 시간이 길어지게 된다. 최근에는 빠른 초기 로딩 시간을 위해 JavaScript 프레임워크 및 라이브러리를 최소화하는 경향이 있어 jQuery 대신 더 가볍고 효율적인 라이브러리들이 사용되고 있다.

그러나 jQuery는 소규모 업체나 스타트업에서는 여전히 사용하는 곳이 많은 것 같다. 브라우저 내장 API에서 제공하지 않는 유용한 기능이나 크로스 브라우징을 지원하는 경우에는 여전히 유용하게 사용될 수 있다고 한다. 역시 장단점이 있듯이 jQuery 라이브러리를 사용해본 경험은 좋은 경험이 되었다.

profile
후니

0개의 댓글