프로젝트] 데이터테이블 success 에 관해서 feat. dataTable이 안그려질 때는 쓰지말자

현재상황

환경 : JSP 페이지내에서 데이터테이블.

에러 : 없음.

데이터테이블로 리스트 목록이 그려지지 않음.

 

@RequestMapping(value = "/admin/report/salesReportList", method = RequestMethod.GET, headers="Accept=application/json", produces="application/json")
@ResponseBody
public ResponseEntity<?> selectSalesReport(@ModelAttribute GoodsVO goodsVO) throws Exception {
    return new ResponseEntity<>(reportService.selectSalesReport(goodsVO), HttpStatus.OK);
}

$('#datatable_01').DataTable({
    paging: true,
    processing: false,  // show indicator
    serverSide: true,
    scrollY: '62vh',
    scrollCollapse: true,
    destroy: true,
    searching: false,
    lengthChange: false,
    responsive: true,
    bPaginate: true,
    pageLength: 15,
    pagingType: 'simple_numbers',
    ordering: false,
    info: true,
    columnDefs: [
        {targets: '_all', visible: true, orderable: false, className: 'dt-head-center dt-body-center'},
        {targets:[2], render: function (data, type, low) {
                return data === '1' ? '판매중' : '마감';
            }
        }
    ],
    ajax: {
        url: '/admin/report/salesReportList',
        type: 'GET',
        dataType: 'json',
        data: function (d) {
            d.columns = null;
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader(header, token);
        },
        success: function(result) {
            var data = result.data;
            console.log('success DATA : ', JSON.stringify(data));
            //console.log('idkey : ', $('#idkey').val(data.data[0].idkey));
        },
        error: function (xhr, option, error) {
            if (xhr.status == 401 || xhr.status == 403) {
                document.location = '/index';
            }else {
                alert(JSON.parse(xhr.responseText).message);
            }
        },
        //dataSrc: 'data'
        dataSrc: function (json) {
            console.log('DATASRC JSON : ', json);
            return json.data;
        }
    },
    order: [[0, 'desc']],
    columns: [
        {data: 'gdSeq'},
        {data: 'gdName'},
        {data: 'gdKind'}
    ]
});

 

원인

데이터테이블 내에서 ajax를 사용할 때 success 를 사용하니깐 그려지지 않았다.

데이터테이블 ajax 에서 success 함수를 사용했는데 오류도 없고 백엔드쪽에서 데이터의 목록은 정확하게 가져오고 있고

JSP view 에서도 값이 제대로 찍힌다.

이유는 dataTable은 정상적으로 성공이면 테이블을 그려주는 동작을 알아서 한다고 한다. 근데 내가 success 함수를 사용해서 자동으로 그려줬는데 다시 한번 재정의를 해서 처음 실행될 때의 동작을 지워버린다는 것이다.

 

백엔드쪽에서 데이터를 잘 뿌리고 있고, JSP 앞단에서도 잘 받고 있다면 데이터를 호출하는 곳에서 뭔가 잘못된 것을 확인해보는 것이 좋을 것 같다.

 

아래 github 블로그에 자세하게 나와있으니 참고하면 도움이 될 것 같다.

 

 

출처 : https://parkwonhui.github.io/spring/2019/05/09/datatable.html

출처 : https://stackoverflow.com/questions/15786572/call-a-function-in-success-of-datatable-ajax-call