OctoberCMS Render Partial to MDB Datatable - datatable

Question

I would like to update the MDB Datatable data in OctoberCMS partial with the latest data. Without the beforeUpdate function, it would retrieve the latest data but without the datatable. With the beforeUpdate function, it shows "cannot reinitialize datatable".
$.request('onFilter', {
data:{
'year':$("select[name='year']").val(),
},
update: {
'site/result': '#result'
},
beforeUpdate: function() {
if ( $.fn.DataTable.isDataTable('#result') ) {
$('#result').DataTable().destroy();
}
$('#resultTbl tbody').empty();
$('#resultTbl').DataTable({
"pageLength": 25,
"pagingType": "simple_numbers",
"scrollY": 450,
})
},
})

Answer 1

Here I solved my problem. Destroy the datatable beforeUpdate, and reinitialize during complete.
$.request('onFilter', {
data:{
'month':$("select[name='month']").val(),
'year':$("select[name='year']").val(),
'department':$("select[name='department']").val(),
'employeeName':$("input[name='employee-name']").val()
},
update: {
'site/result': '#result'
},
beforeUpdate: function() {
$("#resultTbl").dataTable().fnDestroy();
},
complete: function(){
$('#resultTbl').DataTable({
"pageLength": 25,
"pagingType": "simple_numbers",
"scrollY": 450,
})
},
})