Cannot read property 'column'

mborn

I have a report with subtotals using the rowGroup functionality. Because it's a responsive report to allow running on tablets, phones, etc., I'm trying to get the subtotal to line up with the field being totaled by finding out how many of the columns are being displayed on the parent line vs on child rows.

        var detailTable = $('#detailTable').DataTable({
            responsive: true,
            paging: false,
            info: false,
            fixedHeader: true,
            orderClasses: false,
            order: [[2, 'asc'], [0, 'asc'], [1, 'asc']],
            buttons: [
                {extend: 'excel', text: '<i class="far fa-file-excel"></i> Excel', footer: true},
                {extend: 'pdf', text: '<i class="far fa-file-pdf"></i> PDF', footer: true},
                {extend: 'print', text: '<i class="fas fa-print"></i> Print', footer: true}
            ],
            rowGroup: {
                startRender: null,
                endRender: function (rows, group) {

                    var assocTotal = rows
                        .data()
                        .pluck(8)
                        .reduce(function (a, b) {
                            return a + b * 1;
                        }, 0);
                    assocTotal = $.fn.dataTable.render.number(',', '.', 2, '').display(assocTotal);

                    var container = $('<tr/>');
                    visibleFields = 0;
                    for (let i = 0; i < 11; i++) {
                        if (detailTable.column(i).responsiveHidden()) {
                            visibleFields = visibleFields + 1;
                        }
                    }
                    visibleFields = visibleFields - 2;
                    for (let i = 0; i < visibleFields; i++){
                        container.append('<td></td>');
                    }
                    container.append('<td><b>Associate Total </b></td>');
                    container.append('<td style="text-align: right;"><b>' + assocTotal + '</b></td>');
                    return $(container)
                },
                dataSrc: 4,
            },
            footerCallback: function (row, data, start, end, display) {
                var api = this.api(), data;

                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };

                var assocTotal = api
                    .column(8, {page: 'current'})
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                assocTotal = $.fn.dataTable.render.number(',', '.', 2, '').display(assocTotal);

                // Update footer by showing the total with the reference of the column index
                $(api.column(7).footer()).html(' Grand Total');
                $(api.column(8).footer()).html(assocTotal);
            },
        });

I'm getting the following error:

jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot read property 'column' of undefined
at g.endRender (index.php:576)
at g._draw (dataTables.rowgroup.min.js:8)
at HTMLTableElement.<anonymous> (dataTables.rowgroup.min.js:7)
at HTMLTableElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLTableElement.y.handle (jquery-3.3.1.min.js:2)
at Object.trigger (jquery-3.3.1.min.js:2)
at HTMLTableElement.<anonymous> (jquery-3.3.1.min.js:2)
at Function.each (jquery-3.3.1.min.js:2)
at w.fn.init.each (jquery-3.3.1.min.js:2)
at w.fn.init.trigger (jquery-3.3.1.min.js:2)

All assistance greatly appreciated as always!
Mike

kthorngren

My guess is the problem is with this line and that detailTable is undefined in the scope of the endRender function:

if (detailTable.column(i).responsiveHidden()) {

Is this line referred to by at g.endRender (index.php:576)?

Maybe something like this would work:

            var table = $('#detailTable').DataTable();
            for (let i = 0; i < 11; i++) {
                if (table.column(i).responsiveHidden()) {

If this doesn't help then please post a link to your page or a test case replicating the issue. This will allow us to more easily help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mborn

Kevin,

Your suggestion did the trick. Thanks so much for your help.

Mike