Hide empty columns in responsive datatables

miman

It took me several hours to hide empty columns in responsive datatables. I hope this will help others do it more quickly.
First of all thanks to elpaisa who posted the basis of my code few years ago. I just updated the code in the post with some new API-Methods and added support for the Responsive extension.

/*
 * check all cells of given datatable and hide each column containing only empty cells
 * ATTENTION: this will only work if responsive-property in datatables is set to true
 */
function hideEmptyColumns(selector) {
    var emptyColumnsIndexes = []; // store index of empty columns here
    // check each column separately for empty cells
    $(selector).find('th').each(function(i) {
        // get all cells for current column
        var cells = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
        var emptyCells = 0;

        cells.each(function(cell) {
            // increase emptyCells if current cell is empty, trim string to remove possible spaces in cell
            if ($(this).html().trim() === '') {
                emptyCells++;
            }
        });

        // if all cells are empty push current column to emptyColumns
        if (emptyCells === $(cells).length) {
            emptyColumnsIndexes.push($(this).index());
        }
    });

    // only make changes if there are columns to hide
    if (emptyColumnsIndexes.length > 0) {
        /* add class never to all empty columns
            never is a special class of the Responsive extension:
            Columns with class never will never be visible, regardless of the browser width, and the data will not be shown in a child row
        */
        $((selector).DataTable().columns(emptyColumnsIndexes).header()).addClass('never');
        // Recalculate the column breakpoints based on the class information of the column header cells, class never will now be available to Responsive extension
        $(selector).DataTable().columns.adjust().responsive.rebuild();
        // immediatly call recalc to have Responsive extension updae the display for the cahnge in classes
        $(selector).DataTable().columns.adjust().responsive.recalc();
    }
}

This is how the funtion is called:

// ensure responsive is set to true otherwise the recalcuclation of the responsive options won't work
$('#example').DataTable({
    responsive: true,
    initComplete: function (oSettings, json) {
        // hide empty columns
        hideEmptyColumns(this);
    }
});

Applying documentation to my Code:
* https://datatables.net/extensions/responsive/classes#Special-classes
* https://datatables.net/reference/api/responsive.rebuild()

First of all i tried to hide the empty columns with columns().visible(false). But there was one problem with this solution.

Following points have to apply to make the problem occur:
* The browser width is to small so initially there are collapsed columns (displayed as childrows)
* all of the collapsed columns are empty and are hidden by using columns().visible(false)

In that case the + sign to expand childrows still appears and won't disappear with a simple columns.adjust().draw()

nick-millennium

Thank you so much for this! Implemented on a project I'm working on, worked perfectly.