using columnsToggle to hide columns but not remove them from the DOM

minifiredragon

Is there a way to use the columnsToggle option, but have the toggle hide columns instead of removing them from the DOM? The reason I ask is I need to assign classes to certain cells, and right now I can only come up with 2 ways:

var table = $('#example').DataTable();
var row = table.row('#row_'+d.data[i].ID);
var node = row.node();

$(node).find('.cssCompTot').addClass('Warn');

or

$(node). find('td').eq(7).addClass('Warn');

The problem with either method is, if the table column is set to be hidden on load (I am using cookies to allow a user to hide columns on load) this will never find the cell that needs to have the class hidden because it is removed from the DOM.

The other problem with the 2nd example is, if different columns are hidden in front of column 7, the position will change as well and the class is applied to the wrong cell.

I have tried using:

 table.row.cell(this.index(),7).node().addClass('Warn')

as well as

 $( table.row.cell(this.index(),7).node() ).addClass('Warn')

colin

The best bet would be to use createdRow - there the first parameter is the tr element, and the fourth is the cell nodes. You can add classes there, and they'll be added regardless of visibility.

Colin

minifiredragon

This is not going to work as the table is created and then cells are updated with new data after the table is initialized.

colin

How are the cells being update? With cell().data(), or direct into the DOM?

It would be worth looking at rowCallback, this is called whenever the table refreshes for each visible row.

Colin

minifiredragon

I do not see how to access specific cells within the rowCallback either. Having looked at it, I am once again left trying to figure out what columns are hidden and which ones are not. Which leads me back to adding a class to the columns cells. Which, because the column is not there when hidden, is not the best solution. Which is why it would be nice to have an option for dataTables to hide columns vs stripping them from the DOM.

As for how I am updating data:

var table = $('#example').DataTable(); //grab table
var row = table.row('#row_'+d.data[i].ID); //grab row
var node = row.node(); //grab data of row

     Adjust the dataTable data object (d.data[i]) with real data due to how long it takes to    
     generate real data. This works well because I use the Semantic UI circle loading 
     icons and text in the initial data load

row.data( d.data[i] ); //reinsert new data, which causes table refresh

kthorngren

Does this example do what you want?
http://live.datatables.net/ciyuride/1/edit

Kevin

minifiredragon

Nope.

http://live.datatables.net/ciyuride/2/

If the column is hidden eq(2) is now on a different column.

minifiredragon

@kthorngren I should also note, I am trying to do this per cell, not per column as well.

colin

I'd still say you need to use rowCallback here, since your data is changing. This example here shows duplicated values in the table.

I do not see how to access specific cells within the rowCallback either.

The second parameter is the data list. The example above shows how to access the nodes.

Having looked at it, I am once again left trying to figure out what columns are hidden and which ones are not.

You would call columns().visible() to get the current visibility state of each column.

Colin