Footer totals are NOT recalculated after destroying table and recreating?

hadi13

closed here with no answer
https://datatables.net/forums/discussion/24263/footer-totals-are-not-recalculated-after-destroying-table-and-recreating

Link to test case:
Debugger code (debug.datatables.net):

Error messages shown:
Description of problem:

Footer totals are NOT recalculated after destroying table and recreating?

"footerCallback": function (row, data, start, end, display) {
var api = this.api(),
intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[, Rs]|(.\d{2})/g, "") * 1 :
typeof i === 'number' ?
i : 0;
}
total = Intl.NumberFormat('id-ID').format((api
.column(2, { filter: 'applied' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0)).toFixed(2))
$(api.column(2).footer()).html(
total
);
}

hadi13

how to edit this?

http://live.datatables.net/nexogidi/3/edit

kthorngren

In the JS BIN menu use File > Clone:

Kevin

allan

I've just tried knocking together a simple little example and it appears to work okay: http://live.datatables.net/kubewofo/1/edit . Perhaps you can modify this one?

Allan

hadi13

Thanks for responding.

been trying to mimic my page:
http://live.datatables.net/gisulora/3/edit

some of my option

destroy: true,
 data: D1,

my footercalback code:

"footerCallback": function (row, data, start, end, display) {
                        var api = this.api(),
                            intVal = function (i) {
                                return typeof i === 'string' ?
                                    i.replace(/[, Rs]|(\.\d{2})/g, "") * 1 :
                                    typeof i === 'number' ?
                                        i : 0;
                            }
                        console.log("api", api.column(2).data())
                        total = Intl.NumberFormat('id-ID').format((api
                            // .column(2, { filter: 'applied' , page: 'current' })
                            .column(2, { filter: 'applied' })

                            .data()
                            // .sum()
                            .reduce(function (a, b) {
                                return intVal(a) + intVal(b);
                            }, 0)
                        )
                            .toFixed(2)
                        )

                        $(api.column(2).footer()).html(
                            total
                        );
                        console.log("total", total)
                    }

tough not all feature is the same,
and i dont know how to change data to the tabel in live.datatables

the default data is shown below

but when i change the data , table total is not change

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

There are some errors in the browsers console. I updated the test case to load datatables.js before the other extensions:
http://live.datatables.net/zonavegu/1/edit

The remaining error is this:

ReferenceError: uu is not defined

You have this statement:

o.append('<option value="' + t + '">' + uu(t, 10) + "</option>");

Not sure what uu(t, 10) is so I commented that line out. You can fix it if you wish. Please update the tet case to show the issue.

Kevin

hadi13

Aha!. found the problem. but not solution yet.
I copied a snippet to move my tfoot after thead.
If I comment that out, the footer callback is working.

any advice, please?
$(document).ready(function () { $("#land-acq").DataTable({ //... options --- });}) ,$("#land-acq").on("draw.dt", function () {$('[data-toggle="tooltip"]').tooltip()$('#land-acq tfoot tr').insertAfter($('#land-acq thead tr'))});

tangerine

Your HTML is missing a closing tfoot tag.

GerardoPM

Dear Hadi13,

I don´t have the answer for your problem, but I want to ask something. How to get the value of Total for your grafic?. I want to do that, but I can´t to get the value.

Thanks,