How to make datatable tfoot responsive?

jaya123

I have used datatable responsive js, after that tbody is responsive but tfoot colunm hidden

allan

I don't quite understand I'm afraid. Where would you expect the tfoot cell to be shown?

Thanks,
Allan

hca1981

In case anyone else is looking for the solution to the fact that the table foot isn't responsive (unlike the body)...

The solution I found was to get rid of the table footer and force the row I needed to the bottom by using a fnDrawCallback function. The trick is to use .DataTable().row().invalidate for each row to force the re-rendering of the responsive hidden stuff.

    function copyTotalsToLastRow(tableId) {
        let tableRows      = document.getElementById(tableId).rows;
        let rowCount       = tableRows.length;
        let cellCount      = tableRows[0].cells.length;
        let totalsRowIndex = -1;
        let totalValues    = [];
        let i;
        let j;

        for (i = 0; i < rowCount; i++) {
            if (tableRows[i].className.indexOf('total') !== -1) {
                totalsRowIndex = i;
                for (j = 0; j < cellCount; j++) {
                    totalValues[j] = tableRows[i].cells[j].innerText;
                }
                tableRows[i].classList.remove('total');
                break;
            }
        }

        if (totalsRowIndex === -1) {
            return;
        }

        for (i = totalsRowIndex; i < (rowCount-1); i++) {
            for (j = 0; j < cellCount; j++) {
                tableRows[i].cells[j].innerText
                    = tableRows[i + 1].cells[j].innerText;
            }
        }

        for (i = 0; i < cellCount; i++) {
            tableRows[rowCount-1].cells[i].innerText = totalValues[i];
        }
        tableRows[rowCount-1].classList.add('total');

        for (i = 0; i < rowCount; i++) {
            $('#' + tableId).DataTable().row(tableRows[i]).invalidate();
        }
    }

    $('#dataTotals').dataTable({
        'responsive': true,
        'filter': false,
        'paging': false,
        'bInfo': false,
        'fnDrawCallback': function() {
            copyTotalsToLastRow('dataTotals');
        }
    });

• which will work for a totals row <tr class="total"> ... and table with id="dataTotals"

allan

This little example has a footer and it is responsive.

Can you link to a test case showing the issue where it is not please?

Allan

hca1981

Hi Allan,

For me the problem was that I had the totals in the tfoot block. When resizing the table, the columns hid and there was no way to view the hidden totals for the table footer (no expand icon for the tfoot row).

allan

Oh - I see what you mean. Yes, I can see how that would be an issue. There is no expand option for the footer table in DataTables at the moment.

Allan