Here is the best way to hide empty columns on and after datatables initialization

Here is the best way to hide empty columns on and after datatables initialization

edited August 2013 in Plug-ins Posts: 1
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); }

Replies

  • Posts: 22,073
    Very good - thank you for sharing with us!

    Allan
This discussion has been closed.