JQuery datatables destroy / recreate

Question

I am trying to reload a datatable via json call. I am using DataTables-1.10.9 and jquery-2.1.4.

I tried paying with API.ajax in datatable format and didn’t get anywhere else, so I decided to try this approach, which I submitted in the past.

If I break when HTML is added to the table, it looks fine (I mean that the old data was deleted and the new data is displayed. But when $ ('# tblRemittanceList') ,. dataTable ({...}); the command is issued again, it reloads the old data, not the new one.If I do not use datatables, the raw table shows the correct data.

//---------------------------------------------------------------------------------------- function fncOpenRemittancesRead(pFrRem,pToRem) { wsUrl = "../Json/OpenRemittances.asp" + "?qryDatabase=" + encodeURIComponent(wsDatabase) + "&qryFrRemittance=" + encodeURIComponent(pFrRem) + "&qryToRemittance=" + encodeURIComponent(pToRem); $('body').addClass('waiting'); $.getJSON(wsUrl, function(data) { fncOpenRemittancesFill(data); $('body').removeClass('waiting'); }); } //---------------------------------------------------------------------------------------- function fncOpenRemittancesFill(pData) { var wsHtml = ''; $('#tblRemittanceList tbody').empty(); for (var i = 0; i < pData.length; i++) { wsHtml += '<tr>'; wsHtml += '<td>' + trim(pData[i].col_1) + '</td>'; wsHtml += '<td>' + trim(pData[i].col_2) + '</td>'; wsHtml += '<td>' + trim(pData[i].col_3) + '</td>'; wsHtml += '<td>' + fncFormatDate(pData[i].col_4,4) + '</td>'; wsHtml += '<td>' + fncFormatNumber(pData[i].col_5,2,"N") + '</td>'; wsHtml += '<td>' + trim(pData[i].col_6) + '</td>'; wsHtml += '<td>' + fncFormatNumber(pData[i].col_7,2,"N") + '</td>'; wsHtml += '<td>' + trim(pData[i].col_8) + '</td>'; wsHtml += '</tr>'; } $('#tblRemittanceList > tbody:last').append(wsHtml); $('#tblRemittanceList').dataTable({ "autoWidth":false , "destroy":true , "info":false , "JQueryUI":true , "ordering":true , "paging":false , "scrollY":"500px" , "scrollCollapse":true }); } 

Answer 1

CAUSE

When DataTables destroys a table because of the destroy:true option, it restores the original content and discards the content you generated.

SOLUTION No. 1

Remove the destroy:true parameter and destroy the table before manipulating the table with the destroy() API.

 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 the destroy:true parameter and instead of destroying and re-creating the table, use clear() to clear the contents of the table, rows.add() to add the table data, and then draw() to re-draw the table.

In this case, you will need to initialize the DataTables once when the page is initialized.

Answer 2

You can initialize your data tables using the retrieve option, like this:

 var table = $('#myTable').DataTable( { dom: 'Bfrtip', retrieve: true, ... 

How should you clean and destroy it:

 $('#myTable').DataTable().clear().destroy(); 

Last you recreate your data:

  var table = $('#myTable').DataTable( { dom: 'Bfrtip', retrieve: true, 

Refer to the tutorial Get here: https://datatables.net/reference/option/retrieve

Answer 3

 datatable refresh $('#Clienttbl').dataTable().fnClearTable();