Datentabellen berechnen-Feldes basierend auf der Zusammenfassung eines anderen Feldes

Siehe diesen Link http://jsfiddle.net/kS9bj/6/

HTML-Code

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
    <thead>
      <tr>
      <th>Name</th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>%</th>
      <th>Delete</th>
      </tr>
    </thead>
    <tbody id="prec">
        <tr >
        <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
          </tr>
      </tbody>            
    <tfoot>
      <tr id="sum">
        <th>Sum</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr id="avg">
        <th>Avg</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </tfoot>
  </table>

Daten-Tabelle Code

$(document).ready(function() {

var iTotal = [0, 0, 0];

var oTable1 = $('#example1').dataTable({
    "table-layout": "fixed",
    "oLanguage": {
        "sZeroRecords": "No data"
    },
    "fnDrawCallback": function(oSettings) {
        iTotal = [0, 0, 0];
        for (var i = 0; i < oSettings.aoData.length; i++) {
            iTotal[0] += oSettings.aoData[i]._aData.c1;
            iTotal[1] += oSettings.aoData[i]._aData.c2;
            iTotal[2] += oSettings.aoData[i]._aData.c3;
        }
        //Sum
        $("#sum").empty();
        $("#sum").append('<th>sum</th><th>'+iTotal[0]+'</th><th>'+iTotal[1]+'</th><th>'+iTotal[2]+'</th>')
        //AVG    
        $("#avg").empty();
        $("#avg").append('<th>avg</th><th>'+iTotal[0]/3+'</th><th>'+iTotal[1]/3+'</th><th>'+iTotal[2]/3+'</th>')    

        for (i = 0; i < oSettings.aoData.length; i++) {
            oSettings.aoData[i]._aData.perc = (oSettings.aoData[i]._aData.c1 / iTotal[0] * 100).toFixed(2) + '%';
       //$("#prec").empty();  
        $("#prec").append('<tr><td></td><td></td><td></td><td></td><td>'+oSettings.aoData[i]._aData.perc+'</td><td></td></tr>');
              }  

    },   

    "fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
    var nCells = nRow.getElementsByTagName('th');
    nCells[1].innerHTML = iTotal[0];

    //check if column[2] is visible??!!how
    //nCells[2].innerHTML=iTotal[1];

    var secondRow = $(nRow).next()[0]; //see this
    var ndCells = secondRow.getElementsByTagName('th');
    ndCells[1].innerHTML = aaData.length > 0 ? (iTotal[0] / aaData.length).toFixed(2) : 0;
     },

    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": false,
    "aaSorting": [[0, "asc"]],

    "aaData": [{"name": "John","c1": 12,"c2": 10,"c3": 5},
               {"name": "Jack","c1": 10,"c2": 20,"c3": 15},
               {"name": "Bill","c1": 8,"c2": 30,"c3": 15}
              ],
    "aoColumns": [{
        "mData": "name"},
    {
        "mData": "c1"},
    {
        "mData": "c2"},
    {
        "mData": "c3"},
    {  },                        
    {
        "mData": null,
        "sClass": "center",
        "mRender": function(data, type, full) {
            return '<img title="Remove"  class="deleteMe" src="http://openfire-websockets.googlecode.com/svn-history/r2/trunk/plugin/web/images/delete-16x16.gif" style="cursor: pointer">';
        }}]

});

});