要訪問第二行中的回調函數，你應該做
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, 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>
感謝您指出那個錯誤。我需要對每列進行求和，以便可以在頁腳中顯示總和和平均值，但我不知道應該使用哪種回調函數，以便每次顯示/隱藏列或移動行時都能正常工作。任何提示？:) – Misiu
任何建議如何重建'fnFooterCallback'？或者也許使用其他回調？ – Misiu
你可以看看我的修改過的樣本嗎？我更新了原始數據數組，但datatable沒有更新，因爲它應該。 http://live.datatables.net/umafuz/5/edit – Misiu