fnFooterCallback footer not appending in grid along with ScrollY

aravind167

fnFooterCallback: function (row, data, start, end, display) {
                        var api = this.api();
                        var debit = formatAmount(api.column(4).data().sum());
                        var credit = formatAmount(api.column(5).data().sum());
                        var balance = obj1[2];
                        var footer = $(this).append('<tfoot><tr></tr></tfoot>');
                        $(footer).append('<th colspan="4"></th><th>' + debit + '</th><th>' + credit + '</th><th>' + balance + '</th>');
                    }

I added footer like above and got the result .
Issue is <tfoot><tr> tag is not getting appended only <th> tags appended after <tbody> , as I'm using ScrollY , i'm not getting fixed footer.

Attched Console Code Screenshot

Please help me out where i made mistake
Thanks in advance pals

kthorngren

I suggest using table().footer() to get the footer. Then apply the HTML. I built a test case for you to show how this might be done.
http://live.datatables.net/vatejizi/1/edit

The approach taken is due to the HTML table having a footer. You may need to change your manipulation based on what you have.

Kevin

aravind167

Hi Kevin @kthorngren .Thanks for the response

I tried by applying table().footer(),now entire tfoot didn't drawn

kthorngren

Do you have a tfoot in your table? Like I said you might need to make some adjustments depending on your environment. If you still need help then update my test case to show what you have so we can help.

Kevin

aravind167

var footer = ledgerLst.table().footer();
                $(footer).empty();
                $(footer).append('<tr><th colspan="4"></th><th>' + formatAmount(ledgerLst.column(4).data().sum()) + '</th><th>'+formatAmount(ledgerLst.column(5).data().sum())+'</th><th> Balance</th></tr>');

I tried puuting adding footer after grid drwan.
I'm new to use datatable so i'm not familiar with methods.

now width issue came . I added "style:width:100%" in table ,still no luck.
once any sort event triggered it aligned in proper

Thanks again @kthorngren

kthorngren

Is the table hidden when initialized?

Without seeing the problem it would be hard to say where the issue is. Can you update the test case or create your own or post a link to you page so we can take a look?

Kevin

aravind167

Hi @kthorngren
i've updated the testcase Kevin

http://live.datatables.net/vatejizi/6/edit

onclicking "Render Footer" link footer data will change
once done it's <td> cells were misaligned with header

Q:Is the table hidden when initialized?
A: $('#example').DataTable().destroy(); --> I destroy the tabe before initialization
that is done bcoz i'm taking new results from db for

kthorngren

The code appends to an existing tfoot element. Either you need to have on in your HTML or build it in Javascript before initializing Datatables. Otherwise there is not. a footer to append to.

Kevin

aravind167

Fixed

$("#example").Datatable().draw() --> Fixed the issue

Thanks Kevin