Problem with 'fnFooterCallback'
Problem with 'fnFooterCallback'
Hello,
I am attempting to use fnFooterCallback when initializing a Datatable. I tried following the basic example shown at http://www.datatables.net/usage/callbacks but my script fails with the following error: "nFoot is null".
The snippet of my table initialization code is as follows. The full example is at http://jsbin.com/urozi4/10 .
[code]
var result= {"aoColumns":[{"sTitle":"Quarter 4"},{"sTitle":"100"},{"sTitle":"115"},{"sTitle":"120"},{"sTitle":"123"},{"sTitle":"128"},{"sTitle":"130"}],"aaData":[["Personal Services","11111.00","15.00","12501.00","150.00",0,0],["Travel",0,0,0,0,0,0],["Facilities",0,0,0,0,0,0],["Supplies",0,0,0,0,0,0],["Equipment",0,0,0,0,0,0],["Other",0,"43.00",0,0,0,0]]};
$("#broken").dataTable(
{
"sDom": 'T<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"bJQueryUI" : true,
"PaginationType" : "full_numbers",
"aaData" : result['aaData'],
"aoColumns" : result['aoColumns'],
"bRetrieve" : true,
"fnFooterCallback" : function(nFoot, aasData, iStart, iEnd, aiDispay) {
nFoot.getElementsByTagName('th')[0].innerHTML="Starting index is "+iStart;
}
}
);
[/code]
I am attempting to use fnFooterCallback when initializing a Datatable. I tried following the basic example shown at http://www.datatables.net/usage/callbacks but my script fails with the following error: "nFoot is null".
The snippet of my table initialization code is as follows. The full example is at http://jsbin.com/urozi4/10 .
[code]
var result= {"aoColumns":[{"sTitle":"Quarter 4"},{"sTitle":"100"},{"sTitle":"115"},{"sTitle":"120"},{"sTitle":"123"},{"sTitle":"128"},{"sTitle":"130"}],"aaData":[["Personal Services","11111.00","15.00","12501.00","150.00",0,0],["Travel",0,0,0,0,0,0],["Facilities",0,0,0,0,0,0],["Supplies",0,0,0,0,0,0],["Equipment",0,0,0,0,0,0],["Other",0,"43.00",0,0,0,0]]};
$("#broken").dataTable(
{
"sDom": 'T<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"bJQueryUI" : true,
"PaginationType" : "full_numbers",
"aaData" : result['aaData'],
"aoColumns" : result['aoColumns'],
"bRetrieve" : true,
"fnFooterCallback" : function(nFoot, aasData, iStart, iEnd, aiDispay) {
nFoot.getElementsByTagName('th')[0].innerHTML="Starting index is "+iStart;
}
}
);
[/code]
This discussion has been closed.
Replies
Allan
Add the tfoot element worked.
Thanks a bunch.
but i have the same problem even after adding the tfoot section.
this is my initalizing code:
[code]
var dataTableOpt = new Object(); //oggetto per configurare la tabella
//creazione della matrice dei dati da visualizzare nella tabella e
//conversione delle stringhe che sono dei link in hyperlink
dataTableOpt.aaData = new Array();
for (var i = 0; i < data.getNumberOfRows(); i++) {
dataTableOpt.aaData.push(new Array());
for (var j = 0; j < data.getNumberOfColumns(); j++) {
if (RegexUrl.test(data.getFormattedValue(i, j))) {
dataTableOpt.aaData[i].push('')
} else {
dataTableOpt.aaData[i].push(data.getFormattedValue(i, j));
}
}
}
//definizione delle colonne della tabella
dataTableOpt.aoColumns = new Array();
for (var j = 0; j < data.getNumberOfColumns(); j++) {
var obj = new Object();
obj.sTitle = data.getColumnLabel(j);
if (data.getColumnType(j) == 'string') {
obj.sClass = "left";
} else if (data.getColumnType(j) == 'number') {
obj.sClass = "right";
obj.sType = "formatted-num";
} else {
obj.sClass = "center";
if (data.getColumnType(j) == 'date') {
obj.sType = "uk_date";
} else if (data.getColumnType(j) == 'datetime') {
obj.sType = "date-euro";
} else if (data.getColumnType(j) == 'timeofday') {
obj.sType = "timeofday";
}
}
dataTableOpt.aoColumns.push(obj);
}
if (prefs.getBool('tableTools')) {
dataTableOpt.sDom = 'CTR<"clear">lfrtip'; //C=ColVis T=TableTools R=ColReorder
} else {
dataTableOpt.sDom = 'CR<"clear">lfrtip'; //C=ColVis R=ColReorder
}
dataTableOpt.bStateSave = true; //richiede i cockie abilitati
//configurazione dell'estensione TableTools (export in csv, pdf e copia)
dataTableOpt.oTableTools = new Object();
dataTableOpt.oTableTools.sSwfPath = "http://tecoa.it/googleDevelop/dynamicTable/swf/copy_cvs_xls_pdf.swf";
dataTableOpt.oTableTools.aButtons = new Array();
var copyOpt = new Object();
copyOpt.sExtends = "copy";
copyOpt.mColumns = "visible";
dataTableOpt.oTableTools.aButtons.push(copyOpt);
var pdfOpt = new Object();
pdfOpt.sExtends = "pdf";
pdfOpt.mColumns = "visible";
dataTableOpt.oTableTools.aButtons.push(pdfOpt);
var csvOpt = new Object();
csvOpt.sExtends = "csv";
csvOpt.mColumns = "visible";
dataTableOpt.oTableTools.aButtons.push(csvOpt);
dataTableOpt.fnFooterCallback = footerCallback; //calcolo dei totali
//creazione del tag table che conterr
for example setting up the callback function for pdf export button in the following way, the parameter nButton and oFlash is null.
[code]
var pdfOpt=new Object();
pdfOpt.sExtends="pdf";
pdfOpt.mColumns="visible";
pdfOpt.sPdfOrientation="landscape";
pdfOpt.fnClick=function (nButton,oConfig,oFlash){
console.log("fnClick.nButton: "+gadgets.json.stringify(nButton));
console.log("fnClick.oConfig: "+gadgets.json.stringify(oConfig));
console.log("fnClick.oFlash: "+gadgets.json.stringify(oFlash));
}
dataTableOpt.oTableTools.aButtons.push(pdfOpt);
[/code]
at this point i suppose that is a configuration problem.
i'am tring to use dataTables in conjunction with ColReorder, ColVis and TableTools by setting the sDom property to CTR<"clear">lfrtip
[code]
dataTableOpt.sDom='CTR<"clear">lfrtip';
[/code]
is it a correct configuration?
is possible that problem arose because i use datatable into a Google Gadget?