I'm looking at making changes to an old project that uses jquery.datatables 1.9.4. There's a table that gets updated via ajax with a call that returns JSON. The code loops through the JSON data and uses the fnAddData method to add the data to a dataTable. The current application allows users to navigate through the data and make changes that get populated back into a source database. I need to add new functionality so that a user can change a cell in one row and have it apply to all rows. I've done this, but the problem is that the change is not reflected in all the other cells until the user manually refreshes the page. How do I get the dataTable to reload the data from the source? I've tried different possible solutions like calling ajax.reload or using dataTable.clear() followed by a call to the method that populates the dataTable in the first place, but none of this is working. I either get a blank table or a table with no updates.
Here's the method that populates the table to start.
function initializeData(id){
$.ajax({
async:false,
url: '/ed/editor/ws?req=getData&id=' + id,
success: function( json ) {
var arr = jQuery.parseJSON(json);
for(var i = 0; i < arr.length; i++){
var row = arr[i];
$('#dTable').dataTable().fnAddData([
row.country,
row.rDate,
row.pDateStream,
row.pDateDown,
makeCheckboxForHidden(id, row.hidden, row.country)
]);
}
}
});
}