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 e.g. 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.
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 e.g. 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.
- How are you submitting the changes to the database? – markpsmith Commented Sep 18, 2015 at 13:15
1 Answer
Reset to default 2Strange 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/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.