Actions on subobjects (columns) on a Multi-table select

Eti

Patterning off of the examples in the docs I attempted to use a custom attribute (data-hidden="true") to indicate that certain columns in the tables should be hidden via Datatables visible option.

My Code:
var tableApi = $('#3Tables-1HiddenColAttrInEachTable').DataTable();

tableApi.columns()
.every(function () {
if ($(this.header()).data("hidden")) {
this.visible(false);
}
});

While it finds and hides the correct column for the first table,
the variable "this" does not appear to advance past the first table. Even though it does loop 15 times, the sum total of the columns in the 3 tables.

Is this a bug/limitation of the multiple tables idea?
Thanks

Eti

It may interest folks to know that if you fetch the api for each table individually that you can then make it work...

however code is more complex, and probably less efficient because you have to call the DataTable() function for each table.
My Code:

tables.each(function(t) { 
    var localTableApi = $("#" + tables[t].id).DataTable();                      localTableApi.columns().every(function (h) { var myHidden = $(this.header()).data("hidden"); 
if (typeof myHidden != "undefined") { this.visible(false); } 
}); 
});

allan

This looks like a bug (and therefore a limitation!) with the every methods at the moment. You can see it with this example. Run the following on the console:

// Make the table headers different to see the issue
$('table.dataTable').eq(1).find('thead th').eq(0).html(1);
$('table.dataTable').eq(1).find('thead th').eq(1).html(2);

// Show the header text
$('table.dataTable').DataTable().columns().every( function () {
  console.log( this.header().innerHTML );
} );

It outputs the text from the first table's header twice, which is shouldn't do. There is a scoping issue in here.

I'll look into it and post back when done!

Allan