[DataTables] ajax를 통해 동적 테이블 만든 뒤, CSV다운로드 가능하게 하는 방법

 

 

 

 

 

 

 

 

 

먼저 datatables cdn들을 임포트합니다.

자세한 다운로드 / cdn 임포트 방법은 아래 홈페이지를 참고하세요.

https://datatables.net/download/

Download

<!-- jQuery 및 DataTables 라이브러리 로드 -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.13.6/datatables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/v/dt/dt-1.13.6/datatables.min.js"></script>

<!-- DataTables Buttons 및 File Export 확장 로드 -->
<script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>

 

반응형

 

 

 

html에 동적으로 생성할 빈 테이블을 만듭니다.

 

<table id="dynamic-table" class="display">
    <thead>
        <!-- 동적으로 생성될 열 헤더 -->
    </thead>
    <tbody>
        <!-- 동적으로 생성될 데이터 행 -->
    </tbody>
</table>

 

 

// AJAX로 다음과 같이 데이터를 가져왔다고 가정 <- 이렇게 주석달은 부분에서 ajax로 동적으로 데이터를 가져오면 됩니다.

 

 

<script>
    $(document).ready(function () {
        // AJAX로 다음과 같이 데이터를 가져왔다고 가정
        var columns = ['a', 'b', 'c'];
        var data = [
            { a: 'Value 1', b: 'Value 2', c: 'Value 3' },
            { a: 'Value 4', b: 'Value 5', c: 'Value 6' },
            { a: 'Value 7', b: 'Value 8', c: 'Value 9' }
        ];

        // thead 엘리먼트 생성
        var theadHtml = '<tr>';
        columns.forEach(function (column) {
            theadHtml += '<th>' + column + '</th>';
        });
        theadHtml += '</tr>';
        $('#dynamic-table thead').html(theadHtml);

        // tbody 엘리먼트 생성
        var tbodyHtml = '';
        data.forEach(function (row) {
            tbodyHtml += '<tr>';
            columns.forEach(function (column) {
                tbodyHtml += '<td>' + row[column] + '</td>';
            });
            tbodyHtml += '</tr>';
        });
        $('#dynamic-table tbody').html(tbodyHtml);

        // DataTables를 초기화하고 File Export 확장을 활성화
        $('#dynamic-table').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'csv' // CSV 내보내기 버튼을 추가
            ]
        });
    });
</script>

 

 

 

다운로드하는 csv파일 안에 한글이  깨지지 않게 나오게 하려면

File Export 확장하는 부분에서 커스터마이즈를 넣어주면 됩니다. (기본은 utf-8)

 dom: 'Bfrtip',
        buttons: [
            {extend: 'csv', // CSV 내보내기 버튼을 추가
        	 customize: function (csv) {
                        return '\uFEFF' + csv; // CSV 데이터 앞에 UTF-8 BOM 문자를 추가하여 UTF-8-SIG로 인코딩
               }}
        ]

 

 

ajax로 데이터를 가져온다면 아래와같이 작성하면 됩니다.

끝!

 

$.ajax({
        url: 'your_api_endpoint', // 데이터를 가져올 API
        success: function (data) {
			// 여기에서부터 테이블 만드는 코드 작성
        }
})

 

 

 

이미 데이터가 들어간 테이블을, ajax로 다시 데이터를 다시 받아와서 새 데이터를 테이블에 넣는다면

아래와같이 datatable를 비어주고 다시 똑같이 데이터를 넣어주면 됩니다.

	if ($.fn.dataTable.isDataTable('#table')) {
	  $('#table').DataTable().destroy();
	  $('#tbody').empty();$('#thead').empty(); // 테이블 요소 삭제
	}