[DataTable plug-in] 데이터 테이블 생성

 

데이터 테이블 플러그인의 사용방법에 대해 알아보겠습니다.

 

---

HTML 준비

아래와 같이 HTML table 태그를 준비하면 된다.

<table class="" id="target_table">
    <thead></thead>
    <tbody></tbody>
</table>

 

---

DataTable 생성 방법

type: 요청 보내는 방법 (GET, POST 등등)

contentType: 요청 보내는 데이터 Type에 대해 정의하는 곳.

dataType: 응답을 받는 데이터 Type을 정의하는 곳.

data: 요청 보내는 데이터를 정의하는 곳이다.

dataSrc: 응답으로 받은 데이터를 중간에서 조작 할 수 있다.

columnDefs: 컬럼별 조작을 할 수 있는 곳.

 

생성 방법 1.

jQuery의 selector를 사용해서 Id로 target_table을 가지고 있는 HTML 태그를 불러온다.

$("#target_table").DataTable({

	ajax: {
    	url: "요청 보내는 주소",
        type: "POST",
        contentType: "application/json; charset=UTF-8",
        dataType: "JSON",
        data: function (data) {
            // ★ body에 값을 실어서 날리는 곳
            
            data.ColumnA = $("#test").val();
            
        },
        dataSrc: function (data) {
            // ★ Post 응답으로 값이 넘어온 곳
            // 응답 값에 대한 필터링을 여기서 작성할 수 있다.
            
            return data;
        },
        columnDefs: [
            { targets: [0, 1], visible: true},
            { targets: '_all', visible: false }
        ],
        error: function() {
        }
    }
    
})

 

 

생성 방법 2.

DataTable 변수를 선언하고 이후, ajax로 요청한 데이터를 데이터 테이블에 하나씩 넣어주기

(※ 해당 방법으로 사용을 많이 안 해봐서 정확하지 않을 수 있습니다.)

 

중요 Point 부분

• row().add(value)
• targetTable.draw()

let targetTable = $("#target_table").DataTable();

$.ajax({
    url: "요청 보내는 주소",
    type: "POST",
    contentType: "application/json; charset=UTF-8",
    dataType: "JSON",
    data: function (data) {
        // 요청 body에 값을 실어서 보내는 곳

    },
    success: function(data) {
    	// 만약 앞에서 데이터 테이블을 값을 불러 왔었다면
        targetTable.clear();

        // for문으로 불러온 데이터를 하나씩 추가해준다.
    	$.each(data, function(index, value) {
        	★ targetTable.row().add(data);
        }
        
        ★ targetTable.draw();
    },
    error: function() {
    
    }
})