jQuery DataTable - Update values and render to HTML table

Question

I've got a jQuery DataTable object that holds log information - how many log messages of type Exception, information etc. an application has logged during a certain date range. I want to update those values as log messages are sent to the underlying DB. I'm currently using javascript to find a cell in HTML table based on an AppId and updating the innerHTML with the new log total. However, since not all applications may be visible eg if there are 15 but the table is only set to show 10 entries, I want to update the values in the DataTable object so the values are correct if/when the applications are included in the table.

I've tried changing the values in the DataTable by doing something like this

var rows = table.rows().data();
var arr = data.aaData;
for (var i = 0; i < arr.length; i++) {
        for (var r = 0; r < rows.length; r++) {
            if (arr[i].ApplicationId == rows[r].AppId) {
                if (arr[i].Debug != 0 || arr[i].Information != 0 || arr[i].Message != 0 || arr[i].Warning != 0 || arr[i].Exception != 0) {
                    //New Exception Count
                    if (arr[i].Exception !== 0) {
                        rows[r].Exception = arr[i].Exception;
                        flash(rows[r].AppId, 'Exception');
                    }
                    //New Warning Count
                    if (arr[i].Warning !== 0) {
                        rows[r].Warning = arr[i].Warning;
                        flash(rows[r].AppId, 'Warning');
                    }
                    //New Message Count
                    if (arr[i].Message !== 0) {
                        rows[r].Message = arr[i].Message;
                        flash(rows[r].AppId, 'Message');
                    }
                    //New Information Count
                    if (arr[i].Information !== 0) {
                        rows[r].Information = arr[i].Information;
                        flash(rows[r].AppId, 'Information');
                    }
                    //New Debug Count
                    if (arr[i].Debug !== 0) {
                        rows[r].Debug = arr[i].Debug;
                        flash(rows[r].AppId, 'Debug');
                    }
                }
            }
        }
    }
    table.draw();

Where data.aaData is JSON format data returned from a controller method. Logging rows to the console I can see that values are updated in the DataTable object, but these new values aren't rendered to the HTML table during the table.draw() call.

So does anyone have a standard way of making changes to values in a DataTable? I've tried using table.cell(r, 5).data(someNewValue); for example but this seems to produce some unreliable results.

Answer 1

Strange your attempt with table.cell(r, 5).data(someNewValue) not is working. Anyway, you can go the other way around, of course. The keyword here is to use invalidate() . If we have a table :

<table id="example"></table>

and some data in JSON format

var data = [
    { "name" : "david", "lastname" : "konrad" }
];

and initialise the dataTable like this

var table = $('#example').DataTable({ 
    data : data,
    columns : [
        { data : "name", title :'name' },
        { data : "lastname", title : 'last name' }
    ]
})

then you can change the content of the dataTable by updating the data JSON this way :

data[0].name = 'sam';
data[0].lastname = 'gregory';

table.row(0).invalidate().draw();

for a specific row, or just

table.rows().invalidate().draw();

for the entire dataset.

demo -> http://jsfiddle.net/vvzvxarf/

---

Update . You can do the exact same as above with an AJAX data source :

$('#example').DataTable( {
  ajax: {
    url: "someUrl",
    dataSrc: function(json) {
       //manipulate the data JSON as you wish
       //in this case, you dont need to invalidate() or draw()
       //...
       return json.data;
    }
})

---

Update II . Manipulating AJAX data after table is rendered. Simply "copy" the response JSON to a variable you can manipulate later on. A variable is simply just a reference. A small example :

var data;
var table = $("#example").DataTable({
    ajax : {
        url : 'data.json',
        dataSrc : function(json) {
            data = json.data;
            return json.data; 
        }
    },
    columns : [
        { data : 'first_name' }
    ]
})

setTimeout(function() {
    data[0].first_name = 'sam';
    table.row(0).invalidate().draw();
}, 100)

The result is exactly the same as my very first example.