Footer update without redrawing

MPeter1975

Hi,

I need to update footer values without redrawing the table with fnRedraw. Is it possible?
Thanks!

allan

Sure - just use standard DOM or jQuery methods to modify the elements in the footer.

Allan

MPeter1975

Hi Allan,

Could u give me a sample how to do that? I'm just learning jQuery. I tried to access it by document.getElementById(id).innerHTML and manage to put my updated data into the ''footer'' but the problem was that a new footer was drawn right under the last line (my table is scrollable and not collapsible).

After that I tried this:
[code]
var nTr = $("#myTable > tfoot > tr")[0];
var nCells = nTr.getElementsByTagName('th');
nCells[0].innerHTML = 'updated';
[/code]

A new footer with the text "updated" is created right below the last row of my table but the original footer remains at the end of the table.

MPeter1975

Sorry Allan, but would you be so kind as to check this for me? Maybe it is also an extra that I wanna update the main table's footer when I change something in the child table (drill-down details). All the math is ok, only I cannot update the main table's text on the right spot. Thanks!

lgmahal

I appear to be having the exact same isue and am wondering if anyone has any new suggestions. I tired Allan's suggestion.

I am also using a scrollable table with a defined tfoot. When a user clicks on a checkbox for a row, then the footer "selected totals" is updated to reflect the new selected totals. But instead of the "SELECTED TOTALS" actual footer getting updated, a new row is added to the scrollable portion of datatable for a second "SELECTED TOTALS" with the new summed values. And you only see or notice this duplicated row and values if you happen to scroll to end of your data.

Here is the javascript code I am using.

[code]
var oTableProjects;


$(document).ready(function() {
oTableProjects = $('#Projects').dataTable( {
"bPaginate": false,
"sScrollY": "400px",
"bFilter": true,
"sDom": "<'H'f><'F'i>",
"bSort": true,
"bInfo": true,
"oLanguage": {
"sInfo": "Showing _TOTAL_ entries",
"sInfoFiltered": " (filtered from _MAX_ entries)"
},
"aaSorting": [],
"aoColumns": [
null,
null,
null,
{ "sType": "num" },
{ "sType": "currency" },
{ "sType": "currency" },
{ "sType": "currency" },
{"bVisible": false},
{"bVisible": false},
{"bVisible": false}
]
} );

/* Add a click handler to the rows - this could be used as a callback */
$('.chkclass').click(function () {
var arrState = [];
var sumAcres = 0;
var sumFLP = 0;
var sumCostShare = 0;
var sumTotal =0;
var cntState = 0;
var cntProject = 0;
arrState.length = 0; //reset array, as all rows are evaluated at each click

$('.chkclass:checked').each(function () {
sumAcres += parseFloat($(this).closest('tr').find('.acres').text().fromCurrencyToNumber());
sumFLP += parseFloat($(this).closest('tr').find('.flp').text().fromCurrencyToNumber());
sumCostShare += parseFloat($(this).closest('tr').find('.costshare').text().fromCurrencyToNumber());
sumTotal += parseFloat($(this).closest('tr').find('.total').text().fromCurrencyToNumber());
if ($.inArray(($(this).closest('tr').find('.state').text()), arrState) == -1)
cntState = arrState.push($(this).closest('tr').find('.state').text());

if (($(this).closest('tr').find('.projectnameorstatus').text().indexOf('[No projects]') == -1)
&& ($(this).closest('tr').find('.projectnameorstatus').text().indexOf('[MISSING]') == -1))
cntProject += 1;
});

$('#selAcresSubmitted').html(sumAcres.toFormattedIntString());
$('#selFLPSubmitted').html(sumFLP.toCurrencyString());
$('#selCostShareSubmitted').html(sumCostShare.toCurrencyString());
$('#selTotalSubmitted').html(sumTotal.toCurrencyString());
$('#selNbrStatesSubmitted').html('(' + cntState + ' states selected)');
$('#selNbrProjectsSubmitted').html('(' + cntProject + ' projects selected)');

/* ANOTHER ATTEMPT - use getElementById
document.getElementById('selAcresSubmitted').innerHTML = sumAcres.toFormattedIntString();
document.getElementById('selFLPSubmitted').innerHTML = sumFLP.toFormattedIntString();
document.getElementById('selCostShareSubmitted').innerHTML = sumCostShare.toFormattedIntString();
document.getElementById('selTotalSubmitted').innerHTML = sumTotal.toFormattedIntString();
document.getElementById('selNbrStatesSubmitted').innerHTML = cntState.toFormattedIntString();
document.getElementById('selNbrProjectsSubmitted').innerHTML = cntProject.toFormattedIntString();
*/

});

[/code]

And here is the HTML for my table
[code]




Submit
State
Project Name
Acres
FLP Proposed Funding
Cost Share Amount
Total Amount
SubmissionStatus
ProjectID
State Org ID




TOTAL SELECTED
(0 states selected)
(0 projects selected)
0
$0
$0
$0
0
0
099


TOTAL ALL
(10 of 20 states submitted)
(4 projects submitted)
57,830
$4,190,000
$46,975,345
$51,165,345
0
0
099






Connecticut
[No projects]

1500
$10000
$1000
$11000
1
12345
20




Vermont

Lisa VT Project

550
$750,000
$260,000
$1,010,000
1
644
59



[/code]

So I must be missing something...the quesiton is what? Thanks in advance for any help!

allan

The problem is that you've got scrolling enabled and for that DataTables clones the elements int he footer. Sadly when it does the close it doesn't remove the ID from the cloned element, which is wrong and a bug - I've made a note to fix it, thanks for flagging this up.

This means that there are two elements with the same ID on the page...

So you need to make the selector more selective for the moment. I've put an example together here:
http://live.datatables.net/ifoyil/edit#javascript,html

Allan

lgmahal

Thank you so much for being so responsive, Allan! Making my selector more selective worked perfectly. I simply changed this:
[code]
$('#selAcresSubmitted').html(sumAcres.toFormattedIntString());
[/code]
to this:
[code]
$('div.dataTables_scrollFoot #selAcresSubmitted').html(sumAcres.toFormattedIntString());
[/code]

BTW - I absolutely LOVE this dataTables plugin; it is incredible. Thank you for all your great work!!

LongHairedTeen

Thank you very much, for me it was useful too.