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 == '') 
            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();

    Plugin usage:

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

This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Get useful and friendly help straight from the source.