프로그래밍/jQuery

제이쿼리 데이터데이블, 컬럼안에서 계산하는 팁 (DataTables, calculated column)

미냐님 2020. 6. 22. 00:45
728x90

 

 

컬럼안에서 계산하는 팁 (DataTables, calculated column)

데이터테이블을 사용중에 columns: [] 영역 안에서 서버에서 전달되는 data들끼리 연산해야할 때가 있습니다.
보통은 각각 전달되는 data: "객체명" 으로 하나씩 밖에 뿌려주지 못 하는데요, 아래와 같은 방법을 사용하면
쉽게 data: "객체명" + data: "객체명" 처럼 연산을 할 수 있습니다.

let dataTable;

function getProductInfo(productNum) {
   dataTable = $('#dataTable').dataTable({
     lengthChange: false,
     ordering: false,
     searching: false,
     processing: false,
     info: false,
     bPaginate: false,
     serverSide: true,
     oSort: true,
     pageLength: 8,
     paging: true,
     ajax: {
       "url": "/products/getProductInfo",
       "method": "POST",
       "dataType": "JSON",
       "data": function (d) {
         d.productNum = productNum;
       },
       complete: function (data) {
       }
     },
     columns: [
       { data: "price"
       },
       { data: "quantity" },
       { data: "price(가격) * quantity(개수)"}, // 여기다가 price(가격) * quantity(개수) 계산하고 싶어요.
       { data: "productName" }
     ]
   }); 
}

위와 같은 데이터테이블을 불러오는 함수가 있습니다.
이 경우 price(가격) 와 quantity(개수) 를 곱해서 데이터를 뿌려주고 싶은 경우가 있습니다.

방법은 엄청 간단한데, 할줄 몰라서 엄청 비효율적으로 코드를 작성했던 기억이 있네요..;;

     columns: [
       { data: "price"
       },
       { data: "quantity" },
       { data: null, 
           render: function (data, type, row) {
           return data["price"] * data["quantity"]
         }
       },
       { data: "productName" }
     ]
   }); 
}

간단히 위와 같이 해결할 수 있습니다. 참 간단 하쥬...?
저 방법을 몰라서 한참 비효휼적인 코드를 짰네요..ㅠㅠ

Reference

728x90