DataTable ) data 동적 생성

jquery를 하시는 분들은 DataTable을 사용하는 분들이 계실텐데 ( 모르시는 분은 여기를 클릭해 한번 보세요! ) 데이터 테이블의 예제는 주로 data 값이 정해져 있고 거기에 DataTable을 씌우는(?) 형식의 example이 많다.

 

예를 들면 아래와 같은 코드이다.

 

<table id="myTable">
    <thead>
        <tr>
            <th>컬럼1</th>
            <th>컬럼1</th>
            <th>컬럼1</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td>내용1</td>
            <td>내용1</td>
            <td>내용1</td>
        </tr>
    </tbody>
</table>

 

이런식의 테이블이 있으면 이 테이블은 이미 데이터값이 존재하는 테이블이다.

이 코드에 아래코드를 붙여주면 DataTable이 완성된다.

 

$(document).ready(function(){
    $('#myTable').DataTable();
});

 

그런데 이건 데이터가 있었을 때 이렇게 하는거고 데이터를 서버에 API호출로 받아오거나 DB에서 긁어와야 하는 상황이라면? 어떻게 할 것인가?

 

기본적으로 이렇게 생각 할 것이다.

 

서버로 데이터를 받아서 html로 table의 데이터를 그리고 똑같이 DataTable()을 만들어 주면 되지 않나?

 

틀린말은 아니다. 단지 불안정하고 코드가 조금 뭐랄까 음 .. 프로페셔널하지 않다. 음.. 뭔소리야

여튼 나는 위에 쓴 말처럼 해봤다. 데이터를 받아와서 그리고 그위에 DataTable을 그렸는데 정상적으로 되긴 했다.

( 여기서 팁은 무조건 API callbackFunction 에서 처리해야한다는 것이다. 그렇지 않으면 테이블에 데이터가 그려지기도 전에 DataTable()을 생성하려고 해서 빈 값의 table이 나올것이다. )

 

하지만 html을 그려주는 코드가 지저분하고, 위의 컬럼은 적은 편이지만 내용이 많거나 컬럼이 많을 경우에는 힘든 경우가 많다.

 

따라서 나는 다른 방법을 좀 찾아봤는데 어차피 구글링 하면 다 나오는거니까 그냥 기록하는 개념으로 작성한다.

 

$('#myTable').DataTable({
    data : data,
    columns : [
        {data : '컬럼1'},
        {data : '컬럼2'},
        {data : '컬럼3'},
    ]
});

 

이렇게 작성하면 된다.

저기서 data : data는 Datatable을 만드는데 필요한 data에 내가 만들어 주고 싶은 컬럼의 data를 적용하는 것이다.

음... 글로는 설명하기 힘드니 역시 개발자는 우선 코드로 대화를..

 

아래 조금 더 자세하게 작성해 보았다.

 

// API를 통해 callback으로 전달 받음.
function callbackFunction(Response){
     var data = []; // 배열 하나 만들어 주기!
     for(var i=0; i<response.length; i++){
         var tableData = {
             data1 : response.data1,
             data2 : response.data2,
             data3 : response.data3
         }
         data.push(tableData); // 만들어진 배열에 tableData push하기.
     };
     
     createDataTable($('#myTable'), data); // createDataTable 실행
}

function createDataTable(tableId, data){
    tableId.DataTable({
        data : data,
        columns : [
            { data : 'data1' },
            { data : 'data2' },
            { data : 'data3' }
        ]   
    });
}

 

즉 전달받은 data의 파라미터를 매칭해 컬럼에 넣어주는 개념이다.

이러면 깔끔하게~! Datatable 생성 완료!