DataTables - where should I update aData?

Question

In my table I have very 4 columns: Name, Age, Percentage, Checkbox column
http://live.datatables.net/umezez/51/edit

What I'm trying to do is to set value of percent column based on checkbox in last column. Idea is to sum age column in footer based on that checkbox (this part I have done) and calculate percent value base on that footer.

When I try to debug and I put my updated data to console I see that percent value is correctly updated, but table isn't updated.

My idea is to update row in fnRowCallback but I think table should be updated when I modify data in fnPreDrawCallback

I'm using DataTables 1.9.4.
Here is my 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) / iTotal * 100).toFixed(2) + "%";
                } else {
                    oSettings.aoData[j]._aData.percent = "";
                }
            }
            //console.log(oSettings.aoData);
        },
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            console.log(aData);
        },
        "fnDrawCallback": function (oSettings) {
            //oSettings.aoData[0]._aData.percent = "24%";
        },

        "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%",
            use: 1
        }, {
            name: "John",
            age: 30,
            percent: "80%",
            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 '<input type="checkbox" class="updateFooter" name="d" ' + (data == 1 ? 'checked="checked"' : '') + ' />';
            }
        }]
    });
});

Answer 1

your code is fine just put this to fnRawCallBack

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $(nRow).children(':eq(2)').text(aData.percent);
    return nRow;
},

dataTables recycle html on each draw, solution is to edit that html. Link to live example http://live.datatables.net/epulak/