[jQuery] drawCallback과 initComplete

drawCallback

테이블의 draw 이벤트가 발생할 때마다 취해야 하는 action 을 실행할 때 유용합니다. 예를 들면, 새로 표시된 데이터로 외부 컨트롤을 업데이트하거나 서버 측 처리가 활성화된 상태에서 새로 생성된 데이터에 이벤트를 할당할 수 있습니다.

ex 1)

$('#example').dataTable({
  "drawCallback": function(settings) {
    alert('DataTables has redrawn the table');
  }
});

ex 2)

$('#example').dataTable({
  "drawCallback": function(settings) {
    const api. = this.api();
    
    console.log(api.rows({ page: 'current' }).data());
  }
})

initComplete

ajax 옵션을 사용해서 테이블이 완전히 초기화되고 데이터가 로드되고 그려지는 시점에 유용합니다. 이러한 경우 테이블은 데이터가 로드되기 전에 초기 실행을 완료하므로 이 콜백은 데이터가 완전히 로드된 것을 알려주기 위해 제공됩니다.

또한 콜백은 Ajax가 데이터를 로드할 때 서버에서 수신한 JSON 데이터로 전달되며, 이는 테이블에 연결된 구성요소를 구성하는 데 유용할 수 있습니다.

ex 1)

$('example').dataTable({
  "initComplete": function(settings, json) {
    alert('DataTable has finished its initialisation.');
  }
});

ex 2)

$('<div class="loading">Loading</div>').appendTo('body');

$('#example').dataTable({
  "initComplete": function(settings, json){
    $('div.loading').remove();
  }
});