DataTables jQuery ẩn cột không làm việc với fnFooterCallback

Question

tôi có 2 datatables trên một trang như trong ví dụ này: http://live.datatables.net/ocasik/

Ngày đầu trang của tôi, tôi có liên kết cho phép di chuyển các hàng từ một bảng khác.
Mỗi khi tôi di chuyển hàng, tôi muốn tính toán lại chân trang.

Điều này có tác dụng nhưng khi tôi thêm fnFooterCallback vào dữ liệuTiếp tục khởi độngTôi không thể ẩn các cột từ bảng đầu tiên. Ví dụ: Cố gắng xóa fnFooterCallback khỏi mã và ví dụ chạy. Bây giờ hiển thị/ẩn liên kết hoạt động tốt (nó ẩn 7 cột và hiển thị 1).

Bằng cách nào đó fnFooterCallback gây ra sự cố với hiển thị/ẩn cột.

---

EDIT: Tôi đã gỡ bỏ dữ liệu không cần thiết từ mẫu của tôi.
Đây là phiên bản đơn giản trên code demo của tôi: http://live.datatables.net/umafuz/

Đây là fnFooterCallback chức năng của tôi:

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

Câu hỏi của tôi là:

• Làm thế nào để sửa đổi mã của tôi cho rằng tôi sẽ có thể di chuyển các hàng, tính toán lại chân trang và hiển thị/ẩn các cột với nhau.
• Cách cập nhật cột thứ năm sao cho giá trị của nó sẽ dựa trên công thức col[1]/sum(col[1]) ngay bây giờ tôi có '10% 'ở mọi nơi nhưng tôi cần tính toán mỗi khi tôi thêm/xóa hàng.

Answer 1

Để truy cập vào hàng thứ hai trong hàm callback của bạn, bạn nên làm

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

Nút ẩn/hiển thị cho một lỗi bởi vì hàm callback của bạn có một lỗi. đó là bởi vì

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

nCells, khi cột đầu tiên là ẩn chỉ có 8 yếu tố và vì lý do này

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

đưa ra một lỗi. Điều này là do fnFooterCallback được gọi mỗi lần bạn gọi fnSetColumnVis. Bạn sẽ phải suy nghĩ lại về logic để thực hiện việc này vào tài khoản

EDIT - Tôi nghĩ rằng tôi cố định nó, hãy nhìn đây 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'); 

    }); 
}); 

Đây là đánh dấu của chân

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