Using draw() doesn't re-draw my table, but remembers the former data

dannysh

I'm using the DataTable as a plugin inside a bootstrap template.
I have there a table in which I load the data dynamically from the server. That works fine.
The problem is when I try to reload the data from the server, i.e.:
if I'm deleting a row (I have a button for that which send the deleting command to the server), I want to reload the [updated] data of the table and show it to the user without reloading the page.
When I'm calling the server, I DO GET the new and updated data.
Then I use the standard .remove() command to remove all the current table's rows and call again the "add new rows to the table" function, using this updated data I've just got.
The weard thing is that the draw() function first drawing the table with its new data (I know it cause I put a breakpoint in the developer of the browser) and a part of a second later, replace it with the old data - like it "keeping" the old data...

Here is a link to a test page that send the requests to the server - you can for example delete or re-activate a line etc.
http://demo.cav.co.il:8080/etopsMBO/cav-viewer.jsp

I've put a breakpoint in the developer before activate the draw().
then, I changed (delete or re-activate) one of the rows, let's say I deleted the 2nd one.
Now, you can see the screen BEFORE calling the draw() function if you'll put this breakpoint (you will see it has the css and the format of a deleted row: it has a line-through the text and an orange "Re-activate" button instead the 3 buttons on a non-deleted row)...
I also see that in the response I got from the server, I got this line with st=9, which means it is deleted...
Now, I let the function to be called (resume the execution) and the second line turned back to look like a non-deleted line, though it IS deleted.

What am I doing wrong?
Thanks a lot,
Danny

Here is a snap of the .js code where I remove and rebuild the rows:

function fillGroupsTable(allGroups) {
    // first, clean the table:
    $(".groupRow").remove();
  
        //then, re-create the table's rows (from the new data I just got from the server): 
        $.each(allGroups, function(i, groupObj) {
        groups[groupObj.sa] = groupObj;
        if (groupObj.parentsa != null) {

            var gclone = $("#groupTrBP").clone(true);
            if (groupObj.st == 9) {
                gclone = $("#groupDelTrBP").clone(true);
            }
            gclone.addClass("groupRow");
            gclone.attr("groupsa", groupObj.sa);
            gclone.find(".grpTrTitle").html(groupObj.title);
            gclone.find(".grpTrCode").html(groupObj.code);
            gclone.find(".grpTrHierarcy").html(groupObj.hrcy);
            gclone.find(".grpTrLevel").html(groupObj.level);

            gclone.appendTo("#groupsTbody");
            gclone.show();
        }
    });

       //then, call the draw function:
       if (tableIsDefined) {
        //Otable.destroy();
        Otable.draw(true);
    }  

allan

Hi Danny,

Thanks for the details of the issue and picking up the priority support option.

The issue here is that you are modifying the DOM rather than using the DataTables API to modify the table (see this FAQ). The problem with that is that DataTables doesn't know that you've modified the table, so it will indeed redraw the old data when draw() is called.

The way to resolve this is to use the DataTables API to update the table. You could do that using rows().remove() and rows.add(), but there isn't any need to clone the row and the update its HTML - that seems like a good way to increase the line count and complexity of the code :-).

Have you considered just having DataTables create the rows for you:

$('#groupsDataTable').DataTable({
    fixedHeader: true,
    order: [[2, "asc"]],
    data: groupObj,
    createdRow: function ( tr, data ) {
        $(tr).attr( 'groupsa', data.sa );
    },
    columns: [
        { data: 'title' },
        { data: 'code' },
        { data: 'hrcy' },
        { data: 'level', width: "20%" },
        .. operation ...
    ]
} )

Then to update the data in the table you can simply use:

if ( $.fn.dataTable.isDataTable( '#groupsDataTable' ) ) {
    $('#groupsDataTable').DataTable()
        .clear()
        .rows.add( groupObj )
        .draw();
}
else {
    ... create table ...
}

Taking it a step further you could use the ajax option to have DataTables fetch the JSON data for you, then all you need to do is call ajax.reload() when you want to refresh the data.

The one thing that I wasn't quite clear on what the operation column - it looks like you clone a different object and that basically has different values in the final column? If so, I would suggest using a renderer to create that data (via columns.render). I think you'll find that a bit easier and better for performance.

Regards,
Allan