Destroy datatable tables on modal-close

Question

firstly apologise as this may seen duplicate since I've searched another solutions before proceed this but still can't figure it out. I initialise the Datatables table inside this code:-

$('#get_contacts').on('show.bs.modal', function(e)
{
$('#contacts_table').DataTable({
 deferRender: true,
 responsive: true,
 'bPaginate': false,
 'bInfo': false,
 ajax: 'send_sms_lib.php?mode=listContacts',
 columns: [
 {data:'contact_id'},
 {data:'contact_name'},
 {data:'mobile_numb'},
 {data:'contact_id'}
 ],
 'columnDefs': [{
 'targets': 3,
 'searchable': false,
 'orderable': false,
 'render': function (data, type, row){
 return '<input type="checkbox" id="no" name="no" value="'+data+'">';
 }
 }]
 });
/* *comment temporary since I'm doing my own testing*
 $('#group_table').DataTable({
 deferRender: true,
 responsive: true,
 'bPaginate': false,
 'bInfo': false,
 ajax: 'send_sms_lib.php?mode=listGroup',
 columns: [
 {data:'group_id'},
 {data:'group_name'},
 {data:'contact_name'},
 {data:'group_id'}
 ],
 'columnDefs': [{
 'targets': 3,
 'searchable': false,
 'orderable': false,
 'render': function (data, type, row){
 return '<input type="checkbox" id="no" name="no" value="'+data+'">';
 }
 }]
 });
 $('#global_contacts_table').DataTable({
 deferRender: true,
 responsive: true,
 'bPaginate': false,
 'bInfo': false,
 ajax: 'send_sms_lib.php?mode=listGlobalContacts',
 columns: [
 {data:'contact_id'},
 {data:'contact_name'},
 {data:'mobile_numb'},
 {data:'department'},
 {data:'contact_id'}
 ],
 'columnDefs': [{
 'targets': 4,
 'searchable': false,
 'orderable': false,
 'render': function (data, type, row){
 return '<input type="checkbox" id="no" name="no" value="'+data+'">';
 }
 }]
 });
 $('#global_group_table').DataTable({
 deferRender: true,
 responsive: true,
 'bPaginate': false,
 'bInfo': false,
 ajax: 'send_sms_lib.php?mode=listGlobalGroup',
 columns: [
 {data:'group_id'},
 {data:'group_name'},
 {data:'contact_name'},
 {data:'department'},
 {data:'contact_id'}
 ],
 'columnDefs': [{
 'targets': 4,
 'searchable': false,
 'orderable': false,
 'render': function (data, type, row){
 return '<input type="checkbox" id="no" name="no" value="'+data+'">';
 }
 }]
 });*/
});

But when I launced the modal, it keeps pop-up the errors as here:-

DataTables warning: table id=contacts_table - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I would like to destroy or if possible to say it as de-initialise the table since the modal consist of multiple menu tabs & intend to destroy table of another tabs to re-initialise table from selected. Here's the code where I intend to do the destroy process:-

$('#get_contacts').on('hidden.bs.modal', function () {
});

Answer 1

Try using .fnDestroy():

$('#get_contacts').on('hidden.bs.modal', function () {
 $('#contacts_table').dataTable().fnDestroy();
});

• Wafie Ali: it's working! thanks @Nishanth Matha. I've add the rest of datatables code as here:- $('#get_contacts').on('hidden.bs.modal', function () { $('#contacts_table').dataTable().fnDestroy(); $('#group_table').dataTable().fnDestroy(); $('#global_contacts_table').dataTable().fnDestroy(); $('#global_group_table').dataTable().fnDestroy(); });
• Wafie Ali: just try, it's not working as your suggestions. my pleasure to have your check on my answers below to modify it if necessary, so I may test again. thanks! =)
• Wafie Ali: I try this $('#get_contacts').on('hidden.bs.modal', function () { $('#contacts_table#group_table#global_contacts_table#glob‌​‌​al_group_table').d‌​a‌​taTable().fnDestr‌​oy(‌​); }); by removing tailing , but the table unload, just the header loaded. Is there somewhere I'm still missing?
• Wafie Ali: still same, cannot work as per your suggestions. but nvm, I'll keep with my first comment & I'm highly appreciate your assistance & supports.

Answer 2

I've try the answers by @Nishanth Matha & add the rest of datatables code as here:-

$('#get_contacts').on('hidden.bs.modal', function () {
 $('#contacts_table').dataTable().fnDestroy();
 $('#group_table').dataTable().fnDestroy(); 
 $('#global_contacts_table').dataTable().fnDestroy(); 
 $('#global_group_table').dataTable().fnDestroy(); 
});

The result of it is the message as in questions not appears again.