How to reload/update a table with values from server

koranke

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)
                          ]);
        }
        
      }
    });     
}

koranke

Anyone? A little bit more information. In the same .js file with the prior initializeData method is another method called applyEdit. There's a lot of code in it that is not relevant to this issue, but in short the applyEdit method gets triggered when a cell is edited, so I added the following code at the end of this applyEdit method, where the value to "updateAllCountries" is true when all rows need to be updated with the same cell value change.

if (updateAllCountries) {
    $('#dTable').dataTable().fnClearTable();
    initializeData(id);
}

If I don't include the first call to fnClearTable, then after making a change to a cell, I get all the rows added again and the old rows are also still there. So, I know that the call to initializeData is working in retrieving the latest data from the db and adding rows to the table. If I only call the first line to clear the table, then after making a change to a cell the table becomes empty. So, you'd think that putting the two lines together would result in the old rows getting cleared and the new rows getting populated, but that's not what happens. Instead, the old rows remain. One last odd thing, if I run it through debugger using the browser dev tools, then it works as expected.

koranke

So I found the problem. Ends up the code I posted was all working fine. The real issue was my unfamiliarity with how web service calls work in javascript. I usually work in Java where the default behavior around API calls is synchronous. In the case with this javascript code, there is a call to a webservice which triggers the database update. I was calling my code to refresh the table view right after this. However, the code to refresh the table was executing before the asynchronous call to post the data had finished. The solution was to simply move the table refresh code into the "success" block of the webservice post call.