コールバック関数の 2 行目にアクセスするには、次のことを行う必要があります。
var secondRow = $(nRow).next();
コールバック関数にエラーがあるため、非表示/表示ボタンでエラーが発生します。それはだから
var nCells = nRow.getElementsByTagName('th');
最初の列が非表示の場合、nCells には 8 つの要素しかないため、
nCells[8].innerHTML=iTotal[7];
エラーを出します。これは、fnFooterCallbackを呼び出すたびに が呼び出されるためですfnSetColumnVis。これを考慮してロジックを再考する必要があります
編集 - 私はそれを修正したと思います、ここを見てください 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');
});
});
これはフッターのマークアップです
<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>