Best way to hide empty columns in jquery dataTable

Question

I lost two days trying to find a good solution on how to hide empty columns in jQuery dataTables via javascript, so I came up with my own solution encoding a new plugin, I think this will help others do it very quickly if you find this the plugin is useful, feel free to extend it and publish your code to help others improve their data tables.

$.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 should only 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(); } 

Call plugin:

 "fnInitComplete": function () { /** * Go to plugin definition for * instructions on how to use. */ this.fnHideEmptyColumns(this); } 

If you have any kind of code observation, be polite, this is not the last word on how to hide empty columns for jQuery dataTables plugin.

Answer 1

Would this be a way to handle this? Based on capturing all columns at the same time and filtering where the row is empty. If everything is empty, then hide the column.

May be added to your function that you wrote. How to try a speed test.

 //get how many columns there are var columnCount = $('yourTable tr:first > td').length; for(var x=0;x<columnCount;x++){ var $columnRows = $("yourTable tbody td:nth-child(" + x + ")"); if($columnRows.length < 0) { var $filteredRows = $columnRows.filter(function() { return $(this).html() != ""; } //only return rows where this column value is not empty if($filterdRows.length < 1) { $("yourTable tr td:nth-child(x)"); } } } 

Please tell us what you think.

Answer 2

For those who stumbled upon this while searching for solutions, there is a fairly recent plugin for DataTables that does what you want and is more customizable than your function.

You can simply activate it by adding the hideEmptyCols option when creating the DataTable

 $('#example-1').DataTable({ hideEmptyCols: true }); 

For a complete set of options, check out the Github Plugin page. However, you may need to call $("#example-1").DataTables().fnAdjustColumnSizing(); manually for some use cases, as the columns became much wider when others were hidden.

Answer 3

I tried to find many solutions before I found code that fixed the problem. I use "fnDrawCallback" with the variable "api" to access the columns () function. I also want the first column in my table to be empty, because I use CSS to change the appearance of the table.

  $(document).ready(function(){ table = $("#tableofproducts").DataTable({ "dom": '<"top"<"left"l>pf<"clear">>rt<"bottom"ip<"clear">>', "oLanguage": { "sSearch": "Search in table" }, responsive: true, "processing": true, 'ajax': { 'url': '<%=ResolveUrl("~/GenericHendler/SearchResultHandler.ashx")%>' }, "fnDrawCallback": function () { $("#loading").hide(); var api = this.api(); setTimeout( function () { api.columns().flatten().each(function (colIdx) { var columnData = api.columns(colIdx).data().join(''); if (columnData.length == (api.rows().count() - 1) && colIdx != 0) { api.column(colIdx).visible(false); } }); },0) } }); })