Proper place and way to update aData

Misiu

I have extremely simple table available at: http://live.datatables.net/umezez/51/edit

What I would like to do is to update aData and update table when I check/uncheck checkboxes.
In footer I'm calculating sum and avg of age column.
In fnPreDrawCallback I'm calculating all new values and updating aData.

after checking in fnRowCallback I see that aData is correct, but table isn't updated.

My only way of getting this to work is to set DOM manually adding below code to fnRowCallback:
[code]
$('td:eq(2)', nRow).html(aData.percent);
[/code]

How and where can I update aData so that DOM will update automatically?


Here in my whole code:
[code]
$(document).ready(function () {
$(document).on('click', "input.updateFooter", function () {
var rowIndex = oTable1.fnGetPosition($(this).closest('tr')[0]);
var ok = this.checked ? 1 : 0;
oTable1.fnSettings().aoData[rowIndex]._aData.use = ok;
oTable1.fnDraw();
});
var iTotal = 0,
rowsInUse = 0;

var oTable1 = $('#example1').dataTable({
"table-layout": "fixed",
"oLanguage": {
"sZeroRecords": "No data"
},
"fnPreDrawCallback": function (oSettings) {
iTotal = 0;
rowsInUse = 0;
for (var i = 0; i < oSettings.aoData.length; i++) {
if (oSettings.aoData[i]._aData.use == 1) {
iTotal += oSettings.aoData[i]._aData.age;
rowsInUse++;
}
}
for (var j = 0; j < oSettings.aoData.length; j++) {
if (oSettings.aoData[j]._aData.use == 1) {
oSettings.aoData[j]._aData.percent= (parseInt(oSettings.aoData[j]._aData.age,10)/iTotal * 100).toFixed(2)+"%";
} else {
oSettings.aoData[j]._aData.percent= "";
}
}
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
console.log(aData);//aData is updated
},
"fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
if (rowsInUse > 0) {
$('#sum .c0').html(iTotal);
$('#avg .c0').html(rowsInUse > 0 ? (iTotal / rowsInUse).toFixed(2) : 0);
}
},
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aaSorting": [
[0, "asc"]
],
"aaData": [{
name: "Tomek",
age: 20,
percent: "20.00%",
use: 1
}, {
name: "John",
age: 30,
percent: "80.00%",
use: 1
}],
"aoColumns": [{
"sTitle": "Name",
"bVisible": true,
"sType": "string",
"sWidth": "100px",
"mData": "name"
}, {
"sTitle": "Age",
"bVisible": true,
"sType": "",
"sWidth": "50px",
"sClass": "center percent",
"mData": "age"
}, {
"sTitle": "%",
"bVisible": true,
"sType": "",
"sWidth": "50px",
"sClass": "center percent",
"mData": "percent"
}, {
"sTitle": "",
"bVisible": true,
"bSortable": false,
"sType": "string",
"sWidth": "20px",
"sClass": "center",
"mData": "use",
mRender: function (data) {
return '';
}
}]
});
});
[/code]

allan

> How and where can I update aData so that DOM will update automatically?

You don't - there is not setter function there, so the rest of DataTables doesn't know that you've change the value. You need to use the fnUpdate API method to update cell contents, although I'd be a little nervous about doing that in a draw callback function since fnUpdate typically will trigger a draw (you can disable that).

Allan