[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)
})
Author And Source
이 문제에 관하여([DataTable]두 DataTable을 한번에 excel에 export 시키는 법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wheezy_han/DataTable두-DataTable을-한번에-excel에-export-시키는-법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)