DataTables logo DataTables

Here is the best way to hide empty columns on and after datatables initialization
  • I lost two days searching for a good solution on how to hide empty columns in jQuery dataTables via javascript, so i came to my own solution coding a new plugin, i think this will help others do it very quickly, if you find this plugin usefull feel free to extend it and post your code to help others improve their dataTables

    $.fn.dataTableExt.oApi.fnHideEmptyColumns = function ( oSettings, tableObject )
    { 
        /**
         * This plugin hides the columns that are empty.
         * If you are using datatable inside jquery tabs
         * you have to add manually this piece of code
         * in the tabs initialization
         * $("#mytable").datatables().fnAdjustColumnSizing();
         * where #mytable is the selector of table 
         * object pointing to this plugin.
         * This plugin can be invoked from 
         * fnInitComplete callback.
         * @author John Diaz
         * @version 1.0
         * @date 06/28/2013
         */
        var selector = tableObject.selector; 
        var columnsToHide = [];
    
        $(selector).find('th').each(function(i) {
    
            var columnIndex = $(this).index(); 
            var rows = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')'); //Find all rows of each column  
            var rowsLength = $(rows).length;
            var emptyRows = 0; 
    
            rows.each(function(r) { 
                if (this.innerHTML == '') 
                    emptyRows++; 
            });  
    
            if(emptyRows == rowsLength) { 
                columnsToHide.push(columnIndex);  //If all rows in the colmun are empty, add index to array
            }  
        }); 
        for(var i=0; i< columnsToHide.length; i++) {
            tableObject.fnSetColumnVis( columnsToHide[i], false ); //Hide columns by index
        }
        /**
         * The following line doesn't work when the plugin 
         * is used inside jquery tabs, then you should
         * add manually this piece of code inside
         * the tabs initialization where ("#myTable") is 
         * your table id selector 
         * ej: $("#myTable").dataTable().fnAdjustColumnSizing();
         */
    
        tableObject.fnAdjustColumnSizing();
    }
    

    Plugin usage:

    "fnInitComplete": function () { 
        /**
         * Go to plugin definition for
         * instructions on how to use.
         */ 
        this.fnHideEmptyColumns(this);
    }
    
    
  • Very good - thank you for sharing with us!

    Allan
This discussion has been closed.
All Discussions