我在一页上有 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,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, 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>
