프로젝트] 데이터테이블 columDefs targets 로 컬럼 데이터 조작하기

function searchList() {
    $('#datatable_01').DataTable({
        paging: false,
        processing: false,  // show indicator
        serverSide: true,
        scrollY: '62vh',
        scrollCollapse: true,
        destroy: true,
        searching: false,
        lengthChange: false,
        responsive: true,
        bPaginate: true,
        pageLength: 15,
        ordering: false,
        info: false,
        columnDefs: [
            {targets: '_all', visible: true, orderable: false, className: 'dt-head-center dt-body-center'},
            {
                targets: [3], render: function (data, type, row) {
                    //return (data <= 0) || (row.gdSaleEnddt <= 0 || row.gdSalePauseYn] === 'Y') ? '마감' : '판매중';
                    console.log("row : ", row);
                    console.log("type : ", type);
                    return data +"/////"+ row.gdSaleEnddt;
                }
            }
        ],
        ajax: {
            url: '/admin/report/salesTransferReportList',
            type: 'GET',
            dataType: 'json',
            data: function (d) {
                d.columns = null;
                console.log("AJAX DATA : ", JSON.stringify(d));
                /*d.searchType =  $('#searchType').val();
                d.searchData = $('#searchData').val();
                d.gdStatus = $('#gdStatus').val();
                d.gdSeq = $('#gdSeq').val();*/
            },
            beforeSend: function(xhr) {
                xhr.setRequestHeader(header, token);
            },

order: [[0, 'desc']],
columns: [
    {data: 'idkey'},
    {data: 'gdSeq'},
    {data: 'gdName'},
    {data: 'gdCloseDt'},
]

 

targets:[3] 은 아래 columns 에 3번째 gdName 에 해당하는 컬럼을 의미한다.

 

render 를 사용해서 function 에서 매개변수에 data 를 넣으면 3번째에 해당하는 컬럼의 데이터가 뽑힌다.

 

만약에 다른 값을 해당하는 컬럼에 같이 표시하려면 매개변수 row 를 입력하고 row.가져올 데이터 를 쓰면 된다.