[jQuery] DataTables - Ajax

Ajax 로드 데이터를 사용하는 이점은 DataTables의 deferRender 옵션을 활성화하여 성능을 높일 수 있다는 것입니다. 이 옵션을 활성화하면 페이지에 그려야 할 때만 DOM 요소가 생성되어 초기 CPU가 줄어듭니다. 데이터가 테이블에 처음 삽입될 때 로드됩니다.

ajax

DataTables는 ajax 옵션을 사용하여 Ajax 요청이 이루어져야 하는 URL을 설정할 수 있습니다.

$('#myTable').DataTable({
  ajax: '/api/myData'
})

ajax.dataSrc

DataTable이 서버에서 반환된 JSON에서 읽을 데이터를 변경하거나 한 양식의 데이터를 다음으로 조작하는 기능을 제공하는 추가 옵션을 제공합니다. DataTables는 데이터 로드가 완료될 때 테이블 그리기를 실행하기 위해 내부적으로 이 옵션을 사용합니다.

1) string
문자열 dataSrc로 읽을 데이터 소스 객체의 속성을 정의

// { tableData: [ ...data... ]}
$('#example').dataTable({
  'ajax': {
    'url': 'data.json',
    'dataSrc': 'tableData'
  }
})

2) function
함수 dataSrc는 한 양식에서 다른 양식으로 서버에서 반환된 데이터를 조작하는 기능을 제공

// 데이터에 대한 링크 추가
$('#example').dataTable( {
  ajax: {
    'url': 'data.json',
      'dataSrc': function (json) {
      for(let i = 0; i < json.data.length; i++){
        json.data[i][0] = '<a href="/message/' + json.data[i][0] + '>View message</a>';
      }
      return json.data;
    }
  }
});

data

columns.data 속성을 사용해서 DataTable에 각 열에 대한 데이터를 가져올 위치를 알려줍니다.

[
    "Tiger Nixon",
    "System Architect",
    "$320,800",
    "2011/04/25",
    "Edinburgh",
    "5421"
]

$('#myTable').DataTable( {
    ajax: ...
} );
  
$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 0 },
        { data: 1 },
        { data: 2 },
        { data: 3 },
        { data: 4 },
        { data: 5 }
    ]
});