How to enable table footer?

jfks

How do I append a footer to my table with the total sum of a column?

                        $(document).ready(function () {
                                $("#" + chartId).DataTable({


                                    data: chartData.data.datasets[0].data,
                                    columns: chartData.data.labels,
                                    responsive: true,
                                    colReorder: true,

                                    dom: 'lBfrtipF',
                                    buttons: [
                                        {
                                            extend: 'copyHtml5',
                                            text: '<i class="fa fa-files-o"></i>',
                                            titleAttr: 'Kopieren'
                                    },
                                        {
                                            extend: 'excelHtml5',
                                            text: '<i class="fa fa-file-excel-o"></i>',
                                            titleAttr: 'Excel'
                                    },
                                        {
                                            extend: 'csvHtml5',
                                            text: '<i class="fa fa-file-text-o"></i>',
                                            titleAttr: 'CSV'
                                    },
                                        {
                                            extend: 'pdfHtml5',
                                            text: '<i class="fa fa-file-pdf-o"></i>',
                                            titleAttr: 'PDF'
                                    }, {
                                            extend: 'print',
                                            text: '<i class="fa fa-print"></i>',
                                            titleAttr: 'Drucken'
                                    },


                                ],
                                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
                                    language: {
                                        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"



                                    },

                                    order: [[2, 'asc']],
                                    rowGroup: {
                                        startRender: function (rows, group) {
                                            var avg = rows
                                                .data()
                                                .pluck(5)
                                                .reduce(function (a, b) {
                                                    return a + b.replace(/[^\d]/g, '') * 1;
                                                }, 0) / rows.count();



                                            return 'Durchschnittsgehalt in ' + group + ' (' + rows.count() + ')' + ': ' +
                                                $.fn.dataTable.render.number(',', '.', 0, '$').display(avg);

                                        },
                                        dataSrc: 2
                                    },



                                    "footerCallback": function (row, data, start, end, display) {
                                        var api = this.api();

                                        // Remove the formatting to get integer data for summation
                                        var intVal = function (i) {
                                            return typeof i === 'string' ?
                                                i.replace(/[\$,]/g, '') * 1 :
                                                typeof i === 'number' ?
                                                i : 0;
                                        };

                                        // Total over all pages
                                        total = api
                                            .column(4)
                                            .data()
                                            .reduce(function (a, b) {
                                                return intVal(a) + intVal(b);
                                            }, 0);

                                        // Total over this page
                                        pageTotal = api
                                            .column(4, {
                                                page: 'current'
                                            })
                                            .data()
                                            .reduce(function (a, b) {
                                                return intVal(a) + intVal(b);
                                            }, 0);

                                        // Update footer
                                        $(api.column(4).footer()).html(
                                            '$' + pageTotal + ' ( $' + total + ' total)'
                                        );
                                    }



                                });




                            }

kthorngren

You need to add the tfoot tag in HTML before Datatables is initialized.

Kevin

jfks

Do you have an example?

Everything of my HTML content is created dynamically via JS. Where exactly should the <tfoot> be inserted?

kthorngren

Your choice of how to add it but this example uses jQuery methods:
http://live.datatables.net/tagoyayi/1/edit

Kevin