[DataTable] DataTable tfoot 여러개 생성 및 sum값 표출

wheezy·2022년 2월 24일
0

JavaScript_DataTables

목록 보기
6/8

Intro

테이블에 입력된 데이터들을 tfoot에 생성시켜주는 방법을 포스해볼 예정이다.

데이터가 db에 매일 저장되는 형식이다.

첫번째는 당일의 데이터만 컬럼별로 sum하는 방식이다.
두번째는 컬럼별 첫날부터 당일까지 sum하는 방식이다.

그렇기 때문에 tfoot을 두행에 나누어 생성시켰다.

밑에 코드를 보여주겠지만 보통은 컬럼의 순서를 지정해서 데이터를 표출한다. 하지만 컬럼의 양이 방대해질 경우 비효율적인 방식이기 때문에 다른 방법을 찾아서 하였다.

따라서 표현방식을 두가지이기 때문에 본인이 편한 방식을 선택하면 될 것 같다🧐

Code

HTML

먼저 html의 tfoot에 자신의 컬럼의 개수만큼 th 을 생성해준다.

<tfoot class="tfootColor">
  
    <tr>
      <th>계 (당일)</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  
    <tr>
      <th>계 (시작 ~ 당일)</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  
</tfoot>

JS

DataTable을 생성해주는 코드에서 footerCallback를 추가해준다. 아래는 전체적인 코드이다.

function example() {
	let table = $('#table').DataTable({
      
          "footerCallback": function (nRow) {
            		// 당일 합계
                      let api = this.api();
                      let intVal = function (i) {
                          return typeof i === 'string' ?
                              i.replace(/[\$,]/g, '') * 1 || i.replace('m', '') * 1 :
                              typeof i === 'number' ?
                                  i : 0;
                      };

                      api.columns('.sum', {page: 'current'}).every(function () {
                          let sum = this
                              .data()
                              .reduce(function (a, b) {
                                  return intVal(a) + intVal(b);
                              }, 0);
                          this.footer().innerHTML = sum;
                      });

                      // 시작 ~ 당일 합계
                      let totalValues = Object.values(totalArr)
                      let secondRow = $(nRow).next()[0];
                      let nCells = secondRow.getElementsByTagName('th');
                      for (let j = 0; j < totalValues.length; j++) {
                          nCells[j + 3].innerHTML = Object.values(totalArr)[j];
                      }
                  }
      
	});
}

좀 더 세분화해서 설명을 하자면... 아래의 코드는 당일 합계이기 때문에 아래처럼 타입변환을 체크해주고 컬럼의 데이터들을 sum해주는 방식이다. 여기서 중요한 점은 원하는 테이블의 thead의 thclass ="sum" 을 추가해주면 된다.

// 당일 합계
            let api = this.api();
            let intVal = function (i) { // 타입 변환
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 || i.replace('m', '') * 1 :
                    typeof i === 'number' ?
                        i : 0;
            };
            
            api.columns('.sum', {page: 'current'}).every(function () {
                let sum = this
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                this.footer().innerHTML = sum;
            });

또한 시작 ~ 당일의 합계일 경우에는 db에 있는 해당하는 컬럼의 데이터를 모두 sum 해주었다.
totalArr은 데이터가 담겨있는 배열로 전역으로 가져왔다.
secondRow를 통해서 첫번째 행의 다음으로 데이터를 잘 삽입할 수 있었다.

 // 공사시작 ~ 당일 합계
            let totalValues = Object.values(totalArr)
            let secondRow = $(nRow).next()[0]; 
            let nCells = secondRow.getElementsByTagName('th');
            for (let j = 0; j < totalValues.length; j++) {
                nCells[j + 3].innerHTML = Object.values(totalArr)[j];
            }

😈 컬럼 각각 지정

아래처럼 각각 컬럼을 인덱스로 지정하는 방식이 있다. 컬럼이 많을 경우에는 비효율적일 수 있지만 하나 혹은 몇개 안될 경우에는 아래와같이 쓰는 방식을 고려해도 좋을 것 같다 :)

"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 || i.replace('m', '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // computing column Total of the complete result
            var matSum = api
                .column( 3 ) // 이런식으로 컬럼 하나하나 지정
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
													.
													.
													.
            // Update footer by showing the total with the reference of the column index
            $( api.column( 1 ).footer() ).html('계');
            $( api.column( 3 ).footer() ).html(matSum);
						           		.
													.
													.
        }

참고
http://live.datatables.net/boweyiga/1/edit

profile
🧀 개발을 하면서 도움이 되었던 부분을 기록하는 공간입니다 🧀

0개의 댓글