隐藏列的jQuery DataTables不适用于fnFooterCallback

我在一个页面上有2个数据表,如下例所示： http://live.datatables.net/ocasik/

在我的页面顶部,我有一个链接,允许将行从一个表移动到另一个表.
每次我移动行我都想重新计算页脚.

这有效,但当我将fnFooterCallback添加到dataTable初始化时,我无法隐藏第一个表中的列.

例如：尝试从代码中删除fnFooterCallback并运行示例.现在显示/隐藏链接工作正常(它隐藏7列并显示1).

不知何故fnFooterCallback导致列显示/隐藏问题.

编辑：
我从我的样本中删除了不必要的数据.
这是我的演示代码的简单版本：http://live.datatables.net/umafuz/

这是我的fnFooterCallback函数：

"fnFooterCallback": function ( nRow,aaData,iStart,iEnd,aidisplay ) {
        var iTotal = [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];
    }

我的问题是：

>如何修改我的代码,我将能够移动行,重新计算页脚和显示/隐藏列.
>如何更新第五列,使其值基于公式col [1] / sum(col [1])现在我到处都有’10％’,但每次添加/删除行时都需要计算它.

解决方法

要访问回调函数中的第二行,您应该这样做

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

隐藏/显示按钮会出错,因为您的回调函数有错误.那是因为

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

nCells,当隐藏第一列时只有8个元素,因此

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

给出错误.这是因为每次调用fnSetColumnVis时都会调用fnFooterCallback.您将不得不重新考虑将此考虑在内的逻辑

编辑 – 我想我修好了,看看这里http://live.datatables.net/umezez/3/edit

$(document).ready(function () {

    var iTotal = [0,0];

    var oTable1 = $('#example1').dataTable({
        "table-layout": "fixed","oLanguage": {
            "sZeroRecords": "No data"
        },"fnPreDrawCallback": function (oSettings) {
            iTotal = [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,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,9,["Adam",6,5,12,null]
        ],"aoColumnDefs": [{
            "sTitle": "Name","bVisible": true,"sType": "string","sWidth": "100px","aTargets": [0]
        },{
            "sTitle": "Column1","sType": "numeric","sWidth": "20px","sClass": "center first","aTargets": [1]
        },{
            "sTitle": "Column2","sClass": "center second","aTargets": [2]
        },{
            "sTitle": "Column3","sWidth": "130px","sClass": "center third","aTargets": [3]
        },{
            "sTitle": "%","bVisible": false,"sWidth": "50px","sClass": "center percent","aTargets": [4]
        },{
            "sTitle": "","bSortable": false,"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"
        },"aaData": [
            ["John",8,["Jill",15,["Will","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,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');

    });
});

这是页脚的标记

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