DataTables Ajax dataSrc가 사용되지 않을 경우

 

DataTables 라이브러리를 사용할 경우

테이블에 표시되는 데이터들을 Server side를 이용하여 가져올 수 있으며

해당 방식은 라이브러리에 포함되어 있는 Ajax를 통해 사용된다.

 

표시되어야 할 데이터가 많을 경우 Server Side를 이용하는것으로 보인다.

대신 단점은 정렬 및 검색 등등.. 클라이언트단에서 처리되던 모든것을 서버단에서 수동으로 처리해주어야한다.

 

해당 기능을 사용하기 위하여 아래와 같이 소스를 작성하였다.

$('#table').DataTable({
    paging: true,
    pageLength: 10,
    processing: true,
    serverSide: true,
    
    ajax: {
    	url: '/getList',
        type: 'POST',
    }
});

 

서버에서 받아오는 API 형식은 아래와 같았고,

 

결과 값 체크 및 'data'에 감싸진 값을 사용해야 했기에, 제공되는 dataSrc를 사용하기로 하였다.

$('#table').DataTable({
    paging: true,
    pageLength: 10,
    processing: true,
    serverSide: true,
    
    ajax: {
    	url: '/getList',
        type: 'POST',
        dataSrc: function(res) {
        	if (res.result == 'T') {
            	var data = res.data;
                return data;
            } else {
            	// 오류 발생
                alert('오류 발생!');
            }
        },
    }
});

 

 

하지만 해당 방식으로 구성할 경우

DataTables에서 Total값을 전달받지 못하고 그로 인하여 페이징 처리가 되지 않았다.

 

데이터를 제대로 출력한다고 해도 좌측 `info` 및 페이징 부분이 정상적으로 동작하지 않음

 

해당 원인을 찾기위해 온 사이트를 찾아본 결과

Ajax를 이용할 경우 dataSrc가 사용되지 않는듯 했고,

dataSrc에서 넘겨주는 데이터를 정해진 형식대로 재가공 처리하여 Return 해주어야 하는듯 했다.

 

방안은 두가지로 구성된다.

 

1. API Return 형식을 변경

- API Return을 변경 할 경우 아래 이미지와 같이 구성해주어야 한다.

- 해당 방식은 보통 공통화 처리된 API형식을 사용하는데, 해당 API만 다르게 Return을 줘야하는 부분이 문제가 될 듯 하다.

'draw', 'recordsTotal', 'recordsFiltered', 'data'

총 네가지의 값이 들어가야하며, Data는 실제로 Table에 그려질 값을 전달하면 된다.

 

 

2. Ajax dataSrc에서 데이터 재가공 후 Return

- 기존 API 구성을 변경 할 수 없다면 dataSrc 부분에서 수정해주어야 한다.

$('#table').DataTable({
    paging: true,
    pageLength: 10,
    processing: true,
    serverSide: true,
    
    ajax: {
    	url: '/getList',
        type: 'POST',
        dataSrc: function(res) {
        	if (res.result == 'T') {
            	var data = res.data;
                
                // 데이터 재가공
                res.recordsTotal = res.data.recordsTotal;
                res.recordsFiltered = res.data.recordsFiltered;
                res.draw = res.data.draw;
                res.data = res.data.items;
                
                return res.data;
            } else {
            	// 오류 발생
                alert('오류 발생!');
            }
        },
    }
});

 

위 코드와 같이 dataSrc에서 라이브러리에서 필요로 하는 값들을 최상단으로 옮겨준 뒤

데이터를 Return 처리 해주면 목록을 잘 그리게 된다.

 

총 15건의 데이터와 그 데이터의 개수에 맞는 페이징이 자동으로 표시된다.

 

 

 

 

## 2022-11-14 추가

 

ajax 옵션에 있는 `dataFilter` 기능을 이용하여 처리 하여도 된다.

Datatables 홈페이지를 찾던 결과 아래와 같은 방식으로 해당 데이터를 재가공하여 처리할 수 있었다.

 

$('#table').DataTable({
    paging: true,
    pageLength: 10,
    processing: true,
    serverSide: true,
    
    ajax: {
    	url: '/getList',
        type: 'POST',
        dataFilter: function(res) {
            var json = $.parseJSON(res);
            
            var data = {
            	'draw': json.data.draw,
                'recordsTotal': json.data.recordsTotal,
                'recordsFiltered': json.data.recordsFiltered,
                'data': json.data.items,
            };
            
            return JSON.stringify(data);
        },
    }
});

따지고 보면 `dataSrc`와 크게 다를바 없어보이긴 하지만.. 이런 방식으로도 처리가 된다.