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

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

minifiredragonminifiredragon Posts: 42Questions: 7Answers: 2

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')

Answers

  • colincolin Posts: 9,819Questions: 0Answers: 1,626

    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

  • minifiredragonminifiredragon Posts: 42Questions: 7Answers: 2

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

  • colincolin Posts: 9,819Questions: 0Answers: 1,626

    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

  • minifiredragonminifiredragon Posts: 42Questions: 7Answers: 2

    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
    
  • kthorngrenkthorngren Posts: 10,622Questions: 25Answers: 2,421

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

    Kevin

  • minifiredragonminifiredragon Posts: 42Questions: 7Answers: 2

    Nope.

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

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

  • minifiredragonminifiredragon Posts: 42Questions: 7Answers: 2

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

  • colincolin Posts: 9,819Questions: 0Answers: 1,626

    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

Sign In or Register to comment.