Show/Hide Columns without column index reference

Zac

Hi all, love the plugin!

I'm currently trying to use a button to show and hide a set of columns. It works fine, as long as I hard code the column indexes, e.g.

[code]
table.fnSetColumnVis(9, bVis);
table.fnSetColumnVis(10, bVis);
table.fnSetColumnVis(11, bVis);
[/code]

However, this becomes problematic for me as I have lots of tables in my web app, and I start to need to write lots of extra javascript just for this.

What I'd love to do is use the table header class to define which columns toggle. For example, when I initialise the datatable, I use:

[code]
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ "toggle" ] }
]
[/code]

This is perfect. What I'm looking for is a way to dynamically toggle whichever columns have the appropriate header class, after initialisation.

I had tried something like this:
[code]
function toggleColumns() {
var table = $('#report-table table').dataTable();
$('#report-table table thead tr th').each(function (index) {
if ($(this).hasClass('toggle'))
table.fnSetColumnVis(index, !detailedView);
});
detailedView = !detailedView;
}
[/code]

However this of course is a silly idea because when the columns are hidden, jquery won't iterate them.

Any thoughts?

allan

If it is as simple as showing all currently hidden columns - then you could iterate over fnSettings().aoColumn looking for the bVisible property. If false then show the column ( eg. fnSettings().aoColumns[iCol].bVisible - then show iCol ). You could combine this with looking at the header element for each column aoColumns[].nTh to check the class name as well if you want.

Beyond that, I think more complex interactions would probably require a cached array of the TH elements so you can access them directly and in the required order.

Allan

Zac

Allan, that's really very helpful. Thanks a lot. Bit of a late reply here, I know.

Here is the code I've gone with in the end:

[code]
var detailedView = false;

function toggleColumns() {
detailedView = !detailedView;
var table = $('#myTable').dataTable();
$.each(table.fnSettings().aoColumns, function (index, value) {
if (value.nTh.classList.contains("toggle"))
table.fnSetColumnVis(index, detailedView);
});
}
[/code]

allan

Nice one - use of a closure :-). Thanks for posting your code - I'm sure others will find it useful.

Regards,
Allan

ray

Hi,

I've been using this code for a while with v1.7.6 and recently updated to v1.9.0. Now the same code gives the error:
[code]a.aoColumns[o] is undefined[/code]
I also checked it with v1.8.2 with the same error.

If i try to set the visibility separately for the last column (which is the only one with the "toggle"-tag) with [code]table.fnSetColumnVis(8, 1);[/code] i also get the error.

Do you have any idea what could cause this?

Regards,
Ray

allan

Not a clue, can you link to a test case showing the error please?

Thanks,
Allan

ray

I will set a test case up, and post the link then.

Regards,
Ray

ray

Hi Allan,

while setting up the test case, i found the problem which causes the error.

[code] oTable.fnSetColumnVis(index, visible);[/code]
only accepts a boolean for visible. If you put an int there it doesnt work anymore.

You can see the problem on this test page:
http://www.racyics.de/dataTablesTest/

The first button works, the second doesnt. This behaviour seems to have changed from v1.7 to v1.8, because as I said, in v1.7.6 both ways work. Dont know, if this is volitional, but maybe good to know for others anyhow.

Regards,
Ray

allan

Thanks for letting me know - if it worked with an integer before then it was entirely accidental. As the documentation for fnSetColumnVis notes the second parameter should be a boolean.

Good to hear you got it working.

Allan