Jquery datatables destroy/re-create
just use destroy() method to destory the table like this:
$('#experience-table').DataTable().destroy();
and re-initialise it like this example:
var table= $('#experience-table').DataTable({
processing: true,
serverSide: true,
ajax: '{{url('employee/experience/list/experience')}}'+'/'+emp_id,
columns: [
{ data: 'emp_no', name: 'emp_no' },
{ data: 'position', name: 'position' },
{ data: 'organization', name: 'organization' },
{ data: 'duration', name: 'duration' },
{ data: 'action', name: 'action' },
],
searching: false
});
You can initialize your datatables using the retrieve option like this:
var table = $('#myTable').DataTable( {
dom: 'Bfrtip',
retrieve: true, ...
Than you have to clear and destroy it:
$('#myTable').DataTable().clear().destroy();
By the last you recreate your datatables:
var table = $('#myTable').DataTable( {
dom: 'Bfrtip',
retrieve: true,
Check the Retrieve tutorial here: https://datatables.net/reference/option/retrieve
CAUSE
When DataTables destroys the table because of the option destroy:true
it restores original content and discards the content that you've generated.
SOLUTION #1
Remove destroy:true
option and destroy the table before you manipulate the table with destroy()
API method.
if ( $.fn.DataTable.isDataTable('#tblRemittanceList') ) {
$('#tblRemittanceList').DataTable().destroy();
}
$('#tblRemittanceList tbody').empty();
// ... skipped ...
$('#tblRemittanceList').dataTable({
"autoWidth":false,
"info":false,
"JQueryUI":true,
"ordering":true,
"paging":false,
"scrollY":"500px",
"scrollCollapse":true
});
SOLUTION #2
Remove destroy:true
option and instead of destroying and recreating the table use clear()
to clear the table content, rows.add()
to add the table data and then draw()
to re-draw the table.
In this case you would need to initialize DataTables once on page initialization.