How to Manually recall the "fnFooterCallback" function
How to Manually recall the "fnFooterCallback" function
when i delete some rows from datatables, i see that the "fnFooterCallback" function does not recall.
So how to manually recall the "fnFooterCallback" function.
i Want to use a Button when clicked i can recall the "fnFooterCallback" function.
like this
$(document).ready(function(){
$('#buttonId').click(function(){
//how to call "fnFooterCallback" function of datatables
})
})
thanks you!
So how to manually recall the "fnFooterCallback" function.
i Want to use a Button when clicked i can recall the "fnFooterCallback" function.
like this
$(document).ready(function(){
$('#buttonId').click(function(){
//how to call "fnFooterCallback" function of datatables
})
})
thanks you!
This discussion has been closed.
Replies
How are you deleting the rows from the table? The reason I ask is that the fnFooterCallback function is called whenever DataTables does a redraw of the display - and this occurs when you make use of the fnDeleteRow() API function. This is the recommended way to delete rows from a data table, as it will clean up the internals of the created object as well, whereas just removing the DOM element can cause some issues.
Regards,
Allan
$('#instrument :button').click(function(){
var aPos = oTable.fnGetPosition(this.parentNode); //get row
var aData = oTable.fnGetData( aPos[0] ); //get id
oTable.fnDeleteRow( aPos[0]); //del row
Car.Del(aData[0],0); //del the car by id
});
In html
....datatables id=instrument
123
123
... // loop
=====================
the full code
[code]
$(document).ready(function() {
//delete the row and delete the date by own function "Car.Del"
$('#instrument :button').click(function() {
// "" get the row
var aPos = oTable.fnGetPosition(this.parentNode);
//get the "id" for Car.Del()
var aData = oTable.fnGetData(aPos[0]);
//the row has been delete,but "fnFooterCallback" did not recall
oTable.fnDeleteRow(aPos[0]);
Car.Del(aData[0], 0);
});
//clear the table and fnFooterCallback" has worked
$('#cleanAll').click(function() {
Car.Clear();
oTable.fnClearTable();
});
oTable = $('#instrument').dataTable({
//group show
"fnDrawCallback": function(oSettings) {
if (oSettings.aiDisplay.length == 0)
{
return;
}
var nTrs = $('#instrument tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
var i = 0;
for (var i = 0; i < nTrs.length; i++)
{
var iDisplayIndex = oSettings._iDisplayStart + i;
var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[3];
if (sGroup != sLastGroup)
{
var nGroup = document.createElement('tr');
var nCell = document.createElement('td');
nCell.colSpan = iColspan;
nCell.className = "group";
nCell.innerHTML = sGroup;
nGroup.appendChild(nCell);
nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
sLastGroup = sGroup;
}
}
},
"aoColumns": [
{
"bSearchable": false,
"bVisible": false
},
null,
null,
{
"bVisible": false
},
{
"bSearchable": false,
"bSortable": false
},
null,
{
"bSearchable": false,
"bSortable": false
},
{
"bSearchable": false,
"bSortable": false
}],
"aaSortingFixed": [[3, 'asc']],
"sDom": '<"clear">rt',
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"oLanguage": {
"sUrl": "inc/zh_cn.txt"
},
//fnFooterCallback sum by unit price(aaData[i][6]) * number(1)
"fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
var iTotalMarket = 0;
for (var i = 0; i < aaData.length; i++)
{
iTotalMarket += aaData[i][6] * 1;
}
/* Modify the footer row to match what we want */
var nCells = nRow.getElementsByTagName('th');
nCells[4].innerHTML = '$ ' + parseInt(iTotalMarket);
}
});
//number input change when blur
$(':text').blur(function() {
var r = /^(0|[1-9][0-9]*)$/
v = this.value;
//some input restriction
if (! (r.test(v))) {
alert("input error?");
this.value = 1;
v = 1;
}
//change when input blur, "fnUpdate" redraw the datatables so i see the "fnFooterCallback" has worked.
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition(this.parentNode);
/* Get the data array for this row */
var aData = oTable.fnGetData(aPos[0]);
oTable.fnUpdate(v * aData[5], aPos[0], 6);
/* Single cell */
Car.CheckNum(aData[0], v);
});
});
[/code]
the demo:
http://skymood.sea68.com/cap/saleorderlist.asp
I'm afraid that I'm at a little bit of a loss as to why the fnFooterCallback isn't being called with the above code. The fnDeleteRow function will call fnDraw, and that much call the footer callback. The best I can suggest at the moment is to insert some console.log() debug into DataTables to try and trace the issue back...
Regards,
Allan
I used Firebug to track a problem
when i use the "fnDeleteRow" function ,the "fnFooterCallback" function is actually being recalled.
But the problem is in the data?it is not changed,therefore, the function looks like has not been recalled.
===
"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
var iTotalMarket = 0;
for ( var i=0 ; i
Ah - I think we are getting there now :-). fnDeleteRow will delete the row from the display array, but not from the master data cache, which is where the footer callback is getting it's data from! To overcome this all you need to do is pass 'false' as the third parameter to fnDeleteRow() ( http://datatables.net/api#fnDeleteRow ) which will delete the data from the master data cache as well.
Regards,
Allan