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.