DataTable.js 의 애프터 렌더링 이벤트 적용하기

DataTable.js 는 테이블 형식의 데이터를 표시해주기 위해 RDBMS에서 많이 사용하는 자바스크립트입니다. 이 중에 데이터가 모두 로드가 된 뒤 (렌더링 후) 함수를 호출해야 하는 경우가 있는데 아래의 방법과 같이 적용하면 됩니다.

$('#element_id').DataTable({
	..,
    fnDrawCallback: function() {
        .....
    }
});

가져온 데이터를 토대로 그릴 때는 아래와 같이 작성해줍니다. 

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

 

실제로 활용한 코드입니다.

$(tableId).DataTable({
    "paging": true,
    "lengthChange": false,
    "searching": false,
    "ordering": true,
    "info": true,
    "autoWidth": false,
    "responsive": true,
    "processing" : true,
    "serverSide" : true,
    "displayLength" : 25,
    "ajax": {
      "url" : "/api/user",
      "data" : {
        "sortColumn" : "id"
      }
    },
    "order": [
      [1, "desc"]
    ],
    "columns": [
      {"data": "userId"},
      {"data": "username"},
      {"data": "email"},
      {"data": "lastLoginAt"},
      {"data": "socialType"},
      {"data": "userType"},
      {"data": "registeredAt"},
      {"data": "leavedAt"},
    ],
    "language": {
      "emptyTable": "No data found.",
      "info": "_START_ ~ _END_ / 전체 _TOTAL_ 개",
      "infoEmpty": "",
      "lengthMenu": "_MENU_ 개씩",
      "paginate": {
        "first": "처음",
        "last": "마지막",
        "next": "다음",
        "previous": "이전"
      },
      "search": "사용자 아이디 검색"
    },
    "drawCallback": function() {
      showUserDetails();
    }
  });
  
  // 사용자 정보 이벤트 함수
  function showUserDetails() {
     $('.btn-show-user-details).on('click', function() {
         // 사용자 정보가 보여지는 이벤트 처리
     });
  }