DataTables jQuery ocultar columnas no trabajar con fnFooterCallback

Question

Tengo 2 tablas de datos en una sola página, como en este ejemplo: http://live.datatables.net/ocasik/

En la parte superior de mi página tengo enlace que permite mover las filas de una tabla a otra.
Cada vez que muevo una fila, me gustaría recalcular el pie de página.

Esto funciona pero cuando agrego fnFooterCallback a la inicialización de DataTable no puedo ocultar las columnas de la primera tabla.

Por ejemplo: intente eliminar fnFooterCallback del código y ejecútelo. Ahora mostrar/ocultar el enlace funciona bien (oculta 7 columnas y muestra 1).

De alguna manera fnFooterCallback causa problemas con la columna mostrar/ocultar.

---

EDIT: He quitado los datos innecesarios de mi muestra.
He aquí la versión simple en mi código de demostración: http://live.datatables.net/umafuz/

Aquí es mi fnFooterCallback función:

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

Mis preguntas son:

• de cómo modificar el código para que voy a ser capaz de mover filas, recalcular el pie de página y mostrar/ocultar columnas juntas.
• forma de actualizar la quinta columna de modo que su valor se basa en la fórmula col[1]/sum(col[1]) ahora tengo '10%' en todas partes, pero tengo que calcular cada vez que añadir/eliminar fila.

Answer 1

Para acceder a la segunda fila de la función de devolución de llamada que debe hacer

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

El botón Ocultar/Mostrar da un error debido a que su función de devolución de llamada tiene un error. eso es porque

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

nCells, cuando la primera columna está oculta tiene sólo 8 elementos y por esta razón

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

da un error. Esto se debe a que se llama al fnFooterCallback cada vez que llama al fnSetColumnVis. Va a tener que repensar la lógica para tener esto en cuenta

EDITAR - Creo que lo fijé, mira aquí 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'); 

    }); 
}); 

Este es el margen de beneficio del pie de página

<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>