jQuery DataTables hiding columns don't work with fnFooterCallback

Question

I have 2 datatables on one page like in this example: http://live.datatables.net/ocasik/

On top of my page I have link that allows moving rows from one table to another.
Every time I move row I would like to recalculate footer.

This works but when I add fnFooterCallback to dataTable initialization I can't hide columns from first table.

For example: Try to remove fnFooterCallback from code and run example. Now show/hide link works fine (it hides 7 columns and show 1).

Somehow fnFooterCallback cause problems with column show/hide.

---

EDIT: I've removed unnecessary data from my sample.
Here is simple version on my demo code: http://live.datatables.net/umafuz/

Here is my fnFooterCallback function:

  "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
        var iTotal = [0,0,0];
        for ( var i=0 ; i<aaData.length ; i++ )
        {
            iTotal[0] += aaData[i][3];
            iTotal[1] += aaData[i][2];
            iTotal[2] += aaData[i][3];
        }

        var nCells = nRow.getElementsByTagName('th');
        nCells[1].innerHTML=iTotal[0];
        nCells[2].innerHTML=iTotal[1];
        nCells[3].innerHTML=iTotal[2];
    }

My questions are:

• How to modify my code to that I'll be able to move rows, recalculate footer and show/hide columns together.
• How to update fifth column so that it's value will be based on formula col[1]/sum(col[1]) right now I have '10%' everywhere but I need to calculate it every time I add/remove row.

Answer 1

To access the second row in your callback function you should do

var secondRow = $(nRow).next();

The hide/show button gives an error because your callback function has an error. that's because

var nCells = nRow.getElementsByTagName('th');

nCells, when the first column is hidden has only 8 elements and for this reason

    nCells[8].innerHTML=iTotal[7];

gives an error. This is because fnFooterCallback is called each time you call fnSetColumnVis. You will have to rethink the logic to take this into account

EDIT - I think i fixed it, look here http://live.datatables.net/umezez/3/edit

$(document).ready(function () {

    var iTotal = [0, 0, 0];

    var oTable1 = $('#example1').dataTable({
        "table-layout": "fixed",
        "oLanguage": {
            "sZeroRecords": "No data"
        },
        "fnPreDrawCallback": function (oSettings) {
            iTotal = [0, 0, 0];
            for (var i = 0; i < oSettings.aoData.length; i++) {
                iTotal[0] += oSettings.aoData[i]._aData[1];
                iTotal[1] += oSettings.aoData[i]._aData[2];
                iTotal[2] += oSettings.aoData[i]._aData[3];
            }

        },
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            aData[4] = (aData[1] / iTotal[0] * 100).toFixed(2)+'%';

        },
        "fnDrawCallback": function (oSettings) {

        },
        "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;
           var oTable1 = $('#example1').dataTable();

          var second = oTable1.$('td.second');
          var third = oTable1.$('td.third');
          var percent = oTable1.$('td.percent');
          if( second.length !== 0 ) {
             $('#avg .second').html( aaData.length>0?(iTotal[1]/aaData.length).toFixed(2):0 );
             $('#sum .second').html( iTotal[1] );
          }
          if( third.length !== 0 ) {
              $('#avg .third').html( aaData.length>0?(iTotal[2]/aaData.length).toFixed(2):0 );
             $('#sum .third').html( iTotal[2] );
          }
          if( percent.length > 0 ) {
            console.log(percent);
            oTable1.$('td.first').each(function(i, el) {
              var value = $(this).text();
              $(this).next().text(value * 100 / iTotal[0]);
              console.log(value);
            });
          }
        },
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": true,
        "bInfo": false,
        "bAutoWidth": false,
        "aaSorting": [
            [0, "asc"]
        ],
        "aaData": [
            ["Jack", 2, 1, 3, null, null],
            ["Joe", 4, 2, 9, null, null],
            ["Adam", 6, 5, 12, null, null]
        ],
        "aoColumnDefs": [{
            "sTitle": "Name",
            "bVisible": true,
            "sType": "string",
            "sWidth": "100px",
            "aTargets": [0]
        }, {
            "sTitle": "Column1",
            "bVisible": true,
            "sType": "numeric",
            "sWidth": "20px",
            "sClass": "center first",
            "aTargets": [1]
        }, {
            "sTitle": "Column2",
            "bVisible": true,
            "sType": "numeric",
            "sWidth": "20px",
            "sClass": "center second",
            "aTargets": [2]
        }, {
            "sTitle": "Column3",
            "bVisible": true,
            "sType": "numeric",
            "sWidth": "130px",
            "sClass": "center third",
            "aTargets": [3]
        }, {
            "sTitle": "%",
            "bVisible": false,
            "sType": "string",
            "sWidth": "50px",
            "sClass": "center percent",
            "aTargets": [4]
        }, {
            "sTitle": "",
            "bVisible": true,
            "bSortable": false,
            "sType": "string",
            "sWidth": "20px",
            "sClass": "center",
            "aTargets": [5],
            "fnRender": function (obj) {

                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">';
            }
        }]
    });

    var oTable2 = $('#example2').dataTable({
        "oLanguage": {
            "sZeroRecords": "No data"
        },
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": true,
        "bInfo": false,
        "bAutoWidth": false,
        "aaData": [
            ["John", 12, 2, 8, null, null],
            ["Jill", 2, 15, 15, null, null],
            ["Will", 4, 5, 3, null, null]
        ],
        "aoColumnDefs": [{
            "sTitle": "Name",
            "bVisible": true,
            "sType": "string",
            "sWidth": "100px",
            "aTargets": [0]
        }, {
            "sTitle": "Column1",
            "bVisible": true,
            "sType": "numeric",
            "sWidth": "20px",
            "sClass": "center",
            "aTargets": [1]
        }, {
            "sTitle": "Column2",
            "bVisible": false,
            "sType": "numeric",
            "sWidth": "20px",
            "sClass": "center second",
            "aTargets": [2]
        }, {
            "sTitle": "Column3",
            "bVisible": false,
            "sType": "numeric",
            "sWidth": "130px",
            "sClass": "center third",
            "aTargets": [3]
        }, {
            "sTitle": "%",
            "bVisible": false,
            "sType": "string",
            "sWidth": "20px",
            "sClass": "center percent",
            "aTargets": [4]
        }, {
            "sTitle": "",
            "bVisible": true,
            "bSortable": false,
            "sType": "string",
            "sWidth": "20px",
            "sClass": "center",
            "aTargets": [5],
            "fnRender": function (obj) {

                return '<img title="Add to table above" class="deleteMe" src="http://www.palominosys.com/knowledge_base/webpal_cms/nodes/add.png" style="cursor: pointer">';
            }
        }]
    });

    $(document).on("click", '.deleteMe', function (event) {
        var id = $(this).closest('table').attr('id');
        var table = {
            primary: (id === 'example1') ? oTable1 : oTable2,
            secondary: (id !== 'example1') ? oTable1 : oTable2
        };
        var row = $(this).closest("tr").get(0);
        var addElement = table.primary.fnGetData(row);
        table.secondary.fnAddData(addElement);
        var removeElement = table.secondary.fnGetPosition(row);
        table.primary.fnDeleteRow(removeElement, null, true);
        //oTable1.fnDraw();
    });

    $(".hideMe").on("click", function (event) {
        var bVis = oTable1.fnSettings().aoColumns[2].bVisible;
        oTable1.fnSetColumnVis(2, bVis ? false : true);
        oTable1.fnSetColumnVis(3, bVis ? false : true);
        oTable1.fnSetColumnVis(4, !bVis ? false : true);
        $(this).text(!bVis ? 'hide' : 'show');

    });
});

This is the markup of the footer

    <tfoot>
      <tr id='sum'>
        <th>Sum</th>
        <th></th>
        <th class='second'></th>
        <th class='third'></th>
      </tr>
      <tr id='avg'>
        <th>Avg</th>
         <th></th>
        <th class='second'></th>
        <th class='third'></th>
      </tr>
    </tfoot>
  </table>