Hide columns with empty cells

mantonio

I have been trying and trying to find a solution for hiding certain columns that contain cells with NO data, but cannot seem to find anything that works. I realize you can hide or show columns using columns().visible(), but I need this to happen dynamically and without an event to trigger.

Data is loaded into the table from a MySql DB so the columns will not have the same data all the time. Only certain results are loaded into the table depending on the logged in user. However, there may be times when 50+ columns need to be hidden because none of the cells in the columns contain data. There is always a <th> with data so this seems to make things a little more difficult.

Making this work will improve this particular app's usability (less side to side scrolling) and make my boss happier ;-). Does anyone know of any solution to make this work? I'm looking for a jQuery solution, but at this point I'm up for any type of solution.

Here's one thing I've tried to no avail...

var columns = rmaTable.columns([22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39]).data().join(''); //Select the columns to be hidden, get the data and join the data into one string.
if(columns == "") {columns.visible(false)};

Obviously this doesn't work, but I thought this was as simple as it gets and was hoping somebody else out there has found a solution!

jLinux

This is actually a good idea... Im gonna try it myself and let you know

Ill be using columnsToggle, then hiding them by default if no values in the column

And I may end up using http://underscorejs.org/

jLinux

Hmmm..

Im thinking it might be easier to use the createdRow, so I wont have to loop, but I use ajax and deferRender so it wouldnt check all the rows, just the ones on the current page, but that might be good.

But then if you go to page 1, and it hides a column, then go to page 2, and there is a value in that column, they will have to change it to visible..

jLinux

Got it: http://live.datatables.net/nusulelo/1/

Notice the Age column gets hidden

Was easier than I thought, thanks to the awesome api! columns().every() def made it easy

jLinux

Delete

jLinux

Delete

jLinux

@mantonio - https://github.com/jhyland87/DataTables-Hide-Empty-Columns/tree/master

Demos Here

@allan - Does the line below look OK (from src)?

if(options !== true // If were not targeting all, and ..
    && ($.isArray(options) // .. Its an array, and ..
        && ($.inArray(this.index(), options) === -1 // .. It doesn't contain this columns index, and ..
        && $.inArray(api.column(this.index()).dataSrc(), options) === -1))) // .. It doesn't contain this columns dataSrc ..
    return; // Skip this iteration

Needs to continue with the loop if hideEmptyCols is true, or if its an array, with either the column Index in it, or the column dataSrc.. It seems to work just fine. Just looks like it could be simpler

Sorry for all the updates, lol.

P.S. Ill make it so you can change the hideEmptyColumns option from a whitelist to a blacklist as well, later