I have a modal that displays a table. And I use datatable plugin so that the data is searchable and sortable. It works properly at first but when I close the modal and click other link to the same modal, it displays error. I have found solution to destroy the DataTable and I put the destroy()
before the initialization of the datatable but then no data is displayed inside the table.. if I put it after the initialization it gave me the initialization error the second time I click the button. How am I going to solve this?
here's my code:
$.ajax({
url: "<?php echo site_url('admin/group/getMember')?>",
type: 'POST',
data: { 'groupID': id},
dataType: 'JSON',
success: function(result){
$('#records_table tbody').empty();
// $('#records_table').DataTable({
// "bLengthChange": false,
// "paging":false,
// });
$('.modal-header #hdrmsg').text(result[0].fname);
var trHTML='';
$.each(result, function (i, item) {
trHTML += '<tr><td>' + item.fname + '</td><td>' + item.mname + '</td><td>' + item.lname + '</td></tr>';
});
$('#records_table tbody').append(trHTML);
$('#records_table').DataTable({
"bLengthChange": false,
"paging":false,
});
$('#records_table').DataTable().fnDestroy();
}
});
See Question&Answers more detail:os