Update a column by rowId

tisawyer

Is it possible to update one or more columns in a row given a rowId and the column data? Or is it necessary to delete the entire row then add the row back in with all columns?

tisawyer

I'd be happy with updating the entire row as it looks possible with row().data(). I'd like to use my #rowId to update the row. Is that possible?

BelitaColares

I have the same problem.

when I again call the DataTable he loses the information in table.row (this) .data ();

I do not know how to get the row identifier after it is destroyed and replaced simply by another ajax call .

tisawyer

In order to figure out which row to update I'm doing the below function below. But after a number of calls to this function console.log() starts going crazy and the browser locks. Is it not ok to paw though a DataTable this way?

            function getRowNumber(newCall) {
                // Look thru DataTable for a match 
                currentCalls = t.rows().data();
                i=0;
                for (i=0; i < currentCalls.length; i++) {
                    if (currentRow[0] == newCall.rKey) {
                        return i;
                    } 
                }
            }

allan

If you know both the column and the row, then you can address the specific cell using cell().data(). The cell() selector has the option of being passed as a combination of a row and column selector to get the required cell.

Allan

tisawyer

Problem was that things were blowing up when searching for the rowId to update. For now I find jquery alone suits my needs. Thanks for all the help.

        // Fires when last heard data arrives
        es.addEventListener('lastheard', function (event) {
            var activeCalls = JSON.parse(event.data).data;
            if (typeof activeCalls !== "undefined") {
                // Process one or more activeCalls
                for (var i=0; i < activeCalls.length; i++) {
                    var newCall = activeCalls[i];
                    var row = makeRow(newCall);
                    
                    // find existing row
                    var trID = $('#mlh tr#' + newCall.rKey);
                    if (trID.length > 0 ) {
                        // Update row
                        id = trID.attr('id');
                        $('#' + id + ' td:eq(1)').html(newCall.duration);
                        $('#' + id + ' td:eq(5)').html(newCall.rssi);
                        $('#' + id + ' td:eq(6)').html(newCall.pktLoss);
                    } else {
                        // Add row, new first
                        $('#mlh tr:first').after(row);
                    }
                }
                // Limit length of table
                if ( $('#mlh tr').length > 11 ) {
                    $('#mlh tr:last').remove();
                }
            }
        });

jr42.gordon

I feel you are going about this all wrong. Also, updating the html DOM element will not be reflected in DataTables cached cell data.

As Allan said, if you know the exact row, which it appears you do, then you can use:

  dt.row(trID).data(newCall).draw()

However, what this does is effectively wipe all <td> elements in the row and recreates them.

Another solution I have found is to use the following in conjunction:

https://datatables.net/reference/api/rows().invalidate()

https://datatables.net/reference/api/cells().render()

This will update only the contents of each <td> by calling each columns render function.

tisawyer

Other than updating the DOM, what is 'all wrong'? Is there a better way, perhaps without updating the DOM and then invalidate?

jr42.gordon

The beauty of DataTables is that it holds a pointer back to the original data used to populate it, if it still exists.

So lets say I update some of the values in the array/object used to populate the first row in my DataTable. All I simply need to do next for it to reflect in my DataTable is the following:

dt.row(0).cells().invalidate().render()

Now, not only will the DOM be updated, but the cached data used for sorting and searching will be updated.

ipsyd

Here's a handy function I built that will bulk add or update / add rows dynamically. Your data will need a unique identifier defined using the "rowId" option on your table config.

function applyData(table, data, append){
        
    //Quickly appends new data rows.  Does not update rows
    if(append == true){
        table.rows.add(data); 
        
    //Locate and update rows by rowId or add if new
    }else{
        var index;
        for (var x = 0;x < data.length;x++){
            //Find row index by rowId if row exists
            index = table.row('#' + data[x].yourRowId);
            
            //Update row data if existing, and invalidate for redraw
            if(index.length > 0){
                table.row(index[0]).data(data[x]).invalidate();
            
            //Add row data if new
            }else{
                table.row.add(data[x]); 
            }
        }
    }

    //Redraw table maintaining paging
    table.draw(false);
}

allan

Thanks for sharing that with us!

Allan