Footer totals are NOT recalculated after destroying table and recreating?

Footer totals are NOT recalculated after destroying table and recreating?

hadi13hadi13 Posts: 4Questions: 1Answers: 0

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
);
}

Answers

  • hadi13hadi13 Posts: 4Questions: 1Answers: 0
  • kthorngrenkthorngren Posts: 14,122Questions: 25Answers: 3,331

    In the JS BIN menu use File > Clone:

    Kevin

  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin

    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

  • hadi13hadi13 Posts: 4Questions: 1Answers: 0
    edited October 20

    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.

  • kthorngrenkthorngren Posts: 14,122Questions: 25Answers: 3,331

    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

  • hadi13hadi13 Posts: 4Questions: 1Answers: 0
    edited October 20

    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'))});

  • tangerinetangerine Posts: 3,143Questions: 27Answers: 366

    Your HTML is missing a closing tfoot tag.

Sign In or Register to comment.