Keith Keith - 1 month ago 18
Ajax Question

Jquery datatables destroy/re-create

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

I've tried paying with the .ajax API within datatable and got nowhere, so I thought I'd try this approach which I have sued in the past.

If I break when the HTML has been appended to the table, it looks OK (by this, I mean that the old data has been removed, and the new data is showing. But when the $('#tblRemittanceList').dataTable({...}); command is issued again, it 'reloads' the old data, not the new. If I don't 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

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.