[DataTable]두 DataTable을 한번에 excel에 export 시키는 법

Intro

이제까지는 하나의 DataTable을 excel에 export하는 방식을 사용해왔다.
따라서 직접 여러개의 테이블들을 하나의 excel에 export하기 위해 사용한 방법을 공유해볼 예정이다.

아래의 그림에서 실제 데이터가 들어가는 테이블은 table 1, table 2이다.
그리고 excel에 export 되는 데이터는 Hide table이다.

💡 table 1, table 2의 데이터들을 Hide table에 이어 붙인셈이다.

사용자에 보여지는 테이블은 좀 더 보기 좋은 table1,2를 선택했기 때문에 Hide table을 hide()처리를 하였다.

Code

function example() {
    
    if ($.fn.DataTable.isDataTable('#table1')) {
        $('#table1').DataTable().destroy();
    } 

    let example1 = $('#table1').DataTable({
        "bInfo": false,
        "lengthChange": false,
        "bPaginate": false,
        "bFilter": false,
        sDom: // redefine sDom without lengthChange and default search box
            "<'row'<'col-xs-6 col-sm-4'lB>>" +
            "<'row'<'col-xs-12 col-sm-12 text-right searchCont'>>" +
            "t" +
            "<'row'<'col-sm-3'i><'col-sm-9'p>>",
        buttons: [],
        data: sendList,
        columns: [
            {"data": "name"}, 
            {"data": "age"}, 
            {"data": "city"}
        ],
        "columnDefs": [
            {
                "targets": '_all',
                "className": "text-center",
                "defaultContent": "-"
            }
        ]
    });


    if ($.fn.DataTable.isDataTable('#table2')) {
        $('#table2').DataTable().destroy();
    }

    let example2 = $('#table2').DataTable({
        "bInfo": false,
        "lengthChange": false,
        "bPaginate": false,
        "bFilter": false,
        buttons: [],
        data: sendList2,
        columns: [
            {"data": "school"}, 
            {"data": "job"}
        ],
        "columnDefs": [
            {
                "targets": '_all',
                "defaultContent": "-"
            },
        ],
    });

    let hideTable = $('#excelTbl').DataTable();
    // ** 아래 업그레이드 버전 참고 **
    let List1 = []; 
    // table1 컬럼명 복사
    let columns1 = $('#table1').dataTable().dataTableSettings[2].aoColumns;
    $.each(columns1, function (i, v) {
        List1.push(v.sTitle);
    }); 

    let List2 = []; 
    // table2 컬럼명 복사
    let columns2 = $('#table2').dataTable().dataTableSettings[3].aoColumns;
    $.each(columns2, function (i, v) {
        List2.push(v.sTitle);
    }); 
  
    hideTable.row.add(List1).draw(); // hideTable에 컬럼명 추가
    // hideTable에 example1 테이블의 data 추가
    for (let i = 0; i < example1 .data().length; i++) {
        hideTable.row.add(Object.values(example1 .data()[i])).draw();
    }

    hideTable.row.add(List2).draw(); // hideTable에 컬럼명 추가
    // hideTable에 example2 테이블의 data 추가
    for (let j = 0; j < example2 .data().length; j++) {
        hideTable.row.add(Object.values(example2 .data()[j])).draw();
    }
    }
}

Upgrade Code

컬럼명을 추출하는 부분에서 문법 업그레이드 버전이다.
위의 코드는 dataTables 라이브러리 1.10.5이고 아래는 1.10.6이여서 문제가 없다면 아래의 코드를 쓰는 편이 낫다.

		let List1  = []
        table1.columns().every(function (index) {
            List1.push(table1.column(index).header().textContent)
        })

        let List2 = []
        table2.columns().every(function (index) {
            List2.push(table2.column(index).header().textContent)
        })