DataTables에서 컬럼을 유동적으로 표출하는 방법

Intro

앱에서 데이터가 입력된 컬럼의 값들에 대해서만 웹에서 표출시키는 기능을 구현하였다.
이제까지는 dataTables라이브러리를 이용하면서 옵션에 컬럼을 늘 고정시켰지만 dynamic하게 표출시키는 방법은 처음이였다.

아래 참고 링크가 아주 큰 도움이되었다🤗

기존 컬럼 표출 방법
👀 컬럼 지정하여 원한는 컬럼의 data를 받아오는 형식

function exampleTbl() {
    
    let table2 = $('#tableId').DataTable({
        "ordering": false,
        "bInfo": false,
        "bFilter": false,
        "dom": 'Plfrtip',
        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>>",
        processing: true,
        serverSide: true,
        ajax: {
            url: CONTEXT_PATH + "",
            type: "POST",
            data: function (d) {...},
        buttons: [...],
        columns: [
            {"data": "name"},
            {"data": "age"}, 
            {"data": "city"}, 
        ],
        "columnDefs": [...],
    });
}

유동적으로 컬럼 표출 방법

function exampleTbl(sendDicList) {
  // 파라미터로 값을 받아옴
     let my_columns = [];
  
    $.each( sendDicList[0], function( key, value ) {
        var my_item = {};
        my_item.data = key;
        my_item.title = key;
        my_columns.push(my_item);
    });
  
    let table3 = $('#exampleTbl').DataTable({
        "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: sendDicList,
        columns: my_columns ,
        "columnDefs": [
            {
                "targets": '_all',
                "className": "text-center"
            }
        ],
    })
}

이부분이 아마도 핵심인 듯 싶다 :)

     let my_columns = [];
  
    $.each( sendDicList[0], function( key, value ) {
        var my_item = {};
        my_item.data = key;
        my_item.title = key;
        my_columns.push(my_item);
    });

🎈 가장 주의할 점은 dataTables에서 data와 columns를 받을 때 리스트, 객체 중 어떤 형태로 받아오냐도 중요하다. 이 형식이 맞지 않으면 데이터가 표출이 되지 않는다!!

참고

https://jsfiddle.net/z4t1po8o/18/