Toggle Column visibility using class in dataTables

Question

I know that to toggle the visibility in a column using the dataTables plugin I only have to do:

function fnShowHide( iCol ){
    /* Get the DataTables object again - this is not a recreation, just a get of the object */
    var oTable = $('#content-table-redesign').dataTable();

    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
    oTable.fnSetColumnVis( iCol, bVis ? false : true );
}

but is it possible to get the column using an ID or Class or another mean?

The thing is I am also allowing the user to drag and drop the columns to will and if I go by index then they may be clicking to hide "id" (column 0) but they moved it somewhere else and now whatever is in the position 0 gets hidden instead of the "id" one.

Either that, or somehow trick the plugin to still link the column index regardless of where it's moved to.

EDIT

Here's the HTML the body is basically the same (each td has the same class as its th parent)

 <table id="content-table-redesign" class="display">
            <thead>
                <tr>
                    <th class="ID">ID</th>
                    <th class="Name">Name</th>
                    <th class="Domain">Domain</th>
                    <th class="email">email</th>
                </tr>
            </thead>
            <tbody>

I'm looking for the class, because the one that contains that class is the one that will be removed thead and tbody alike

Adam Terlson · Accepted Answer · 2011-09-08 13:48:02Z

4

I think the easiest answer is simply that dataTables doesn't support this natively and that you'll need to manually pull the index based on class yourself. Luckily, this is easy!

var iCol = $('#content-table-redesign tr').first().children('td.yourclass').index();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );

Your selector may need to use th.yourclass depending on your table structure, of course. So it might read instead:

$('#content-table-redesign thead tr').children('th.yourclass').index();

UPDATE

Based on your HTML, here's your selector:

$('#content-table-redesign thead tr').children('th.ID').index();

You'll note the console logs "0": http://jsfiddle.net/YeAHB/

edited Sep 8, 2011 at 13:48

answered Sep 8, 2011 at 13:18

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tsundoku Over a year ago

I always get an index of -1 any idea why? No matter if it's visible or not or if it has or not been rearranged

Adam Terlson Over a year ago

You'll have to post your HTML and what you're searching for.

Incognito Over a year ago

Adam's right, but watch out. The moment you filter or sort you've got the whole order mixed up.

Adam Terlson Over a year ago

And I've updated my answer. Works fine for me in the Fiddle.

Adam Terlson Over a year ago

Incognito, how would sorting or filtering adjust the position of the columns? Your comment here and your answer below makes me think you're confusing this with table rows....

|

Darren Hall · Accepted Answer · 2017-02-16 15:27:55Z

2

With the latest version of DataTables you can specify the class name and show/hide the columns.

var data_table = $('#data-table').DataTable();
data_table.columns('.location-col').visible(true);

Hope this helps.

answered Feb 16, 2017 at 15:27

Darren Hall

9688 silver badges13 bronze badges

Comments

Ortiga · Accepted Answer · 2011-09-08 13:21:58Z

0

I've never used this plugin, but depending on the html structure, you can use jQuery .index() to find what is the index of the child...

Take a look at this fiddle:

http://jsfiddle.net/UwQ35/

answered Sep 8, 2011 at 13:21

Ortiga

8,8466 gold badges45 silver badges74 bronze badges

2 Comments

Incognito Over a year ago

This would require every row to have an ID. That's not efficient, especially when the DOM already gives you a structure to work with.

Ortiga Over a year ago

The ID is just an example, could be a class (which is what he wanted)

Collectives™ on Stack Overflow

Toggle Column visibility using class in dataTables

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related