DataTables Sample

$(function() {
    moment.locale('ko');

    // 기간검색 초기 30일 설정
    var start_date = moment().subtract(29, 'days');
    var end_date = moment();

    function cb(start, end) {
        $('#sPeriodDate').val(
            start.format('YYYY-MM-DD') + ' ~ '
            + end.format('YYYY-MM-DD'));
    }

    $('#sPeriodDate')
        .daterangepicker(
            {
                locale :{ 
                    format: 'YYYY-MM-DD',
                    separator: ' ~ ',
                    applyLabel: "적용",
                    cancelLabel: "닫기",
                    customRangeLabel: "기간 지정"
                },
                ranges : {
                    '오늘' : [ moment(), moment() ],
                    '어제' : [ moment().subtract(1, 'days'),
                                moment().subtract(1, 'days') ],
                    '지난 7일' : [ moment().subtract(6, 'days'),
                            moment() ],
                    '지난 30일' : [ moment().subtract(29, 'days'),
                            moment() ],
                    '이번 달' : [ moment().startOf('month'),
                            moment().endOf('month') ],
                    '지난 달' : [
                            moment().subtract(1, 'month')
                                    .startOf('month'),
                            moment().subtract(1, 'month')
                                    .endOf('month') ]
                },
                'startDate' :  start_date,
                'endDate' : end_date
            }, cb);

    $('#resetBtn').on('click', function(e) {
        e.preventDefault();
        e.target.form.reset(); 
        cb(start_date, end_date);
    });

    $('#modalBox').on('hide.bs.modal', function (e) {
        // TODO modal 초기화
        $('#modalTable > tbody').empty();
        $('#modalForm')[0].reset();
    });

    $('#modalBox').on('hidden.bs.modal', function (e) {
        
    });

    var table = $('#taxTable').DataTable({
        dom: "<'row'<'col-sm-3'l><'col-sm-9 text-right'B>>" +  //<'col-sm-4'f>
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>",
		buttons: [
            {
				extend: 'excel'
				,text: '<span class="btn btn-success btn-icon-split"><span class="icon text-white-50"><i class="fas fa-download"></i></span><span class="text">Excel Download</span></span>'
				,filename: '계산서발급목록'
				,title: '계산서 발급 목록'
			},
			// {
			// 	extend: 'copy'
			// 	,text: '<span class="btn btn-success btn-icon-split"><span class="icon text-white-50"><i class="fas fa-copy"></i></span><span class="text">클립보드</span></span>'
			// 	,title: '계산서 발급 목록'
			// },
            // {
			// 	extend: 'print'
			// 	,text: '<span class="btn btn-primary btn-icon-split"><span class="icon text-white-50"><i class="fas fa-print"></i></span><span class="text">출력</span></span>'
			// 	,title: '계산서 발급 목록'
			// },
            {
				text: '<span class="btn btn-primary btn-icon-split"><span class="icon text-white-50"><i class="fas fa-file-download"></i></span><span class="text">원본 XML</span></span>'
				, action: function (e, dt, node, config) {
                    downloadZip();
                }
			}
		],
        // 표시 건 수 단위 설정
        lengthMenu: [
            [ 10, 25, 50, 100, -1 ],
            [ '10', '25', '50', '100', 'Show All' ]
        ],
        displayLength: 25,
        searching: false,
        ordering: false,
        scrollX: "100%",
        processing: true,
        serverSide: true,
        fixedHeader: {
            header: true
        },
        columnDefs : [
            {
                targets : 0,
                searchable: false,
                orderable : false,
                className : 'dt-body-center text-center',
                blurable: true,
                render : function(data, type, row) {
                    if(row.resultStatusCode == 'SUC001')
                        return '<input type="checkbox" name="issueId" value="'+ data +'"/>';
                    else
                        return '';
                }
            }, 
            { className: "text-center", targets: [3,4,5,6,7,8,9,10,15] }
        ],
        select: {
            style: 'multi',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]],
        columns: [
            { data: "issueId", defaultContent: ''},
            { data: "issueId",
                render: function ( data, type, row) {
                    return '<span onclick=getDetailInfo("' + data + '")><i class="fas fa-info-circle text-info"></i></span> <span onclick=copyToClipboard("' + data + '")><i class="far fa-copy text-success"></i></span> ' + data;
                }
            },
            { data: "issueDate",
                render: function ( data, type, row ) {
                    return new Date(Number(data.substring(0,4)), Number(data.substring(4,6)) - 1, Number(data.substring(6,8))
                        , Number(data.substring(8,10)), Number(data.substring(10,12)), Number(data.substring(12,14))).format("yyyy-MM-dd a/p hh:mm:ss");
                }
            },
            { data: "invoiceTypeCode", visible: false, searchable: false},
            { data: "processStatusCode",
                render: function ( data, type, row ) {
                    if(data == '01')
                        return '<span class="text-primary">처리완료</span>';
                    else if(data == '02')
                        return '<span class="text-success">처리중</span>';
                    else if(data == '03')
                        return '<span class="text-danger">처리불가</span>';
                    else
                        return '';
                }
            },
            { data: "resultStatusCode"},
            { data: "resultMessage"},
            { data: "writeDate"
                , render: function ( data, type, row ) {
                    return new Date(Number(data.substring(0,4)), Number(data.substring(4,6)) - 1, Number(data.substring(6,8))).format("yyyy-MM-dd");
                }
            },
            { data: "supplyAmount", render: $.fn.dataTable.render.number( ',' )},
            { data: "taxAmount", render: $.fn.dataTable.render.number( ',' )},
            { data: "totalAmount", render: $.fn.dataTable.render.number( ',' )},
            { data: "description1"},
            { data: "description2", visible: false, searchable: false},
            { data: "description3", visible: false, searchable: false},
            ...
        ],
        ajax: {
            url: "/v1/tax-invoice/issueList",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: function (d) {
                d.columns = [];
                return JSON.stringify($.extend({}, d, {
                    "sPeriodType": $('#sPeriodType').val(),
                    "sPeriodDate": $('#sPeriodDate').val(),
                    "sIssueId": $('#sIssueId').val(),
                    "sBusinessType": $('#sBusinessType').val(),
                    "sBusinessId": $('#sBusinessId').val(),
                    "sTaxRegistrationId": $('#sTaxRegistrationId').val(),
                    "sCompanyName": $('#sCompanyName').val(),
                    "sInvoiceType": $('#sInvoiceType').val(),
                    "sInvoiceValue": $('#sInvoiceValue').val(),
                    "sSort": $('#sSort').val(),
                    "sOrder": $('#sOrder').val(),
                }));
                // return JSON.stringify(d);
            }
        }
    });

    $('#taxTable tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('table-primary') ) {
            $(this).removeClass('table-primary');
        } else {
            table.$('tr.table-primary').removeClass('table-primary');
            $(this).addClass('table-primary');
        }
    });

    $('#searchBtn').click(function () {
        table.draw();
    });
});

function downloadZip() {
    let issueIds = $("input:checkbox[name=issueId]:checked").serialize();
    if(issueIds.length > 0) {
        $.ajax({
            url: "/v1/file/downloadZip",
            type: "GET",
            data: issueIds,
            xhrFields: {
                responseType: 'blob' // to avoid binary data being mangled on charset conversion
            },
            success: function(blob, status, xhr) {
                if(xhr.status == 200) {
                    // check for a filename
                    var filename = "";
                    var disposition = xhr.getResponseHeader('Content-Disposition');
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        var matches = filenameRegex.exec(disposition);
                        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                    }
            
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        var URL = window.URL || window.webkitURL;
                        var downloadUrl = URL.createObjectURL(blob);
            
                        if (filename) {
                            // use HTML5 a[download] attribute to specify filename
                            var a = document.createElement("a");
                            // safari doesn't support this yet
                            if (typeof a.download === 'undefined') {
                                window.location.href = downloadUrl;
                            } else {
                                a.href = downloadUrl;
                                a.download = filename;
                                document.body.appendChild(a);
                                a.click();
                            }
                        } else {
                            window.location.href = downloadUrl;
                        }
            
                        setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
                    }
                } else {
                    alert('파일 다운로드 중 오류가 발생하였습니다.');
                }
            },
            error : function(e) {
                if(e.status == 404)
                    alert('원본 XML 파일을 찾을 수 없습니다.');
                else
                    alert('파일 다운로드 중 오류가 발생하였습니다.');
            }
        });
    } else {
        alert('다운받을 세금계산서를 선택하세요.');
    }
}

function copyToClipboard(issueId) {
    navigator.clipboard.writeText(issueId)
        .then(() => { alert('승인번호가 복사되었습니다.')})
        .catch((error) => { alert('승입번호 복사에 실패하였습니다.')});
}

function getDetailInfo(issueId) {
    $.ajax({ 
        url: API_SERVER + '/etaxbill-service/v1/tax-invoice/issue/' + issueId,
        type: "GET", 
        contentType: 'application/json',
        headers: {
            'Authorization': 'Bearer ' + $.cookie("blueport_token"),
            'X-Client-Id': $.cookie('blueport_secret_key')
        },
        cache: false,
        success: function (data) {
            setDetailInfo(data);
        }, 
        error: function (e) { 
            console.log('error : ', e);
            if(e.responseJSON != undefined && e.responseJSON.msg != undefined)
                alert('세금계산서 정보 조회에 실패하였습니다. ( '+ e.responseJSON.msg + ' )');
            else
                alert('세금계산서 정보 조회에 실패하였습니다.');
        },
        complete: function() {
        }
    });
}

function setDetailInfo(result) {
    // console.log(result);
    const d = result.data;
    const i = result.data.taxInvoiceTradeLineItems;
	
  	...
    ...
    
    // 상품정보
    var tags = [];
    $.each(i , function(idx, item){
        tags.push("<tr>\n");
        tags.push("\t<td scope='row'>" + idx + "</td>\n");
        tags.push("\t<td class='text-center'>" + (item.itemSupplyDate != null ? moment(item.itemSupplyDate.replace(/[^0-9]/g,''), 'YYYYMMDD').format('YYYY-MM-DD') : '' )  + "</td>\n");
        tags.push("\t<td>" + (item.itemName != null ? item.itemName : '' ) + "</td>\n");
        tags.push("\t<td>" + (item.itemInformation != null ? item.itemInformation : '' ) + "</td>\n");
        tags.push("\t<td class='text-right'>" + (item.itemQuantity != null ? separator(item.itemQuantity) : '' ) + "</td>\n");
        tags.push("\t<td class='text-right'>" + (item.itemUnitPrice != null ? separator(item.itemUnitPrice) : '' ) + "</td>\n");
        tags.push("\t<td class='text-right'>" + (item.itemSupplyAmount != null ? separator(item.itemSupplyAmount) : '' ) + "</td>\n");
        tags.push("\t<td class='text-right'>" + (item.itemTaxAmount != null ? separator(item.itemTaxAmount) : '' ) + "</td>\n");
        tags.push("\t<td>" + (item.itemDescription != null ? item.itemDescription : '' ) + "</td>\n");
        tags.push("</td>\n");
    });
    $('#modalTable > tbody').append(tags);
}

function separator(numb) {
    if(numb != null && numb != '') {
        var str = numb.toString().split(".");
        str[0] = str[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return str.join(".");
    } else {
        return '';
    }
}