Retrieve Class Name From

bryceray1121

I have specific columns in my table being assigned a class. I want to then check to see if a column has this class. However, i'm having difficulty discovering how to access the class of a column ().

[code] jQuery(tag).dataTable().fnSettings().aoColumns[i];[/code]

With a reference such as this, how would I then get the specified columns class name returned as a text value?

Thanks.

chimerical

This doesn't answer your question, but if you don't mind, I was wondering how you're assigning classes to specific columns in the datatable.

As for your question, without knowing the full context, I'd say someelement.className

bryceray1121

An onclick event on a butotn that toggles the funciton:
[code]
onclick="fnShowHide(this, '#labs-table',Array('Details','Summary')"
[/code]
This is the function:

[code]
function fnShowHide( obj, tag, textVal)
{
var tmpTable = jQuery(tag).dataTable();
var tmpCols = tmpTable.fnSettings().aoColumns;
var bVis = null;
for(var i=0;i<(tmpCols.length);i++){
if(tmpCols[i].className == "dataTables_notVisible"){
bVis = tmpTable.fnSettings().aoColumns[i].bVisible;
tmpTable.fnSetColumnVis( i, bVis ? false : true );
}
}
obj.innerHTML = bVis ? textVal[0] : textVal[1];
tmpTable.fnAdjustColumnSizing();
tmpTable.fnDraw();
}
[/code]

Before the datatables are rendered I give select columns a class "dataTables_notVisible". Then when I initiate dataTables I tell it to hide all columns with the class "dataTables_notVisible". The goal of the above function is to toggle the visibly of the columns with this class. I've tried className, but unless I'm doing something wrong it will not work for me. It works for a standard th object but appears not to work for a data tables object.

Thanks for your help. I've been working on this functionality for a while and this is the last piece I need to put it together.

allan

If you are using aoColumns then you can do aoColumns[i].nTh to get the element, and then just use className to get the class. You might want to use .match(//) or $().hasClass() tho.

Allan

bryceray1121

Thank you, that is very helpful. I seem to have run into a browser related bug. I've tried to narrow it down the best I can but I'm having a little difficulty.

[code]
function fnShowHide( obj, tag, textVal)
{
var tmpTable = jQuery(tag).dataTable();
alert(tmpTable+"-"+tmpTable.fnSettings());
var tmpCols = tmpTable.fnSettings().aoColumns;
var bVis = null;
for(var i=0;i<(tmpCols.length);i++){
if(jQuery(tmpCols[i].nTh).hasClass("dataTables_notVisible")){
bVis = tmpTable.fnSettings().aoColumns[i].bVisible;
tmpTable.fnSetColumnVis( i, bVis ? false : true );
}
}
obj.innerHTML = bVis ? textVal[0] : textVal[1];
tmpTable.fnAdjustColumnSizing();
tmpTable.fnDraw();
}
[/code]

This code works great in Firefox and chrome
It works most of the time in IE8.
However, in IE6/IE7 I'm running into a problem.

If you see in the above funciton I've printed some value out. What happens is after I run this function on a table in IE6/IE7 I get an error:
fnSettings().aoColumns is null or not an object.

The weird thing is, I'm more likely to get this error on the first half of tables I have then the last half. Once the error happens all the showhide functionality is broken. I understand this is a bizarre issue, let me know if there is any more info i can get you.

chimerical

"Before the datatables are rendered I give select columns a class "dataTables_notVisible"

How did you do this part?

bryceray1121

When I create the html I assign a column a class such as:


Then when I render it with datatables I tell datatables to hide columns with this class by default.
[code]
function renderDataTable(id){
var oTable2 = jQuery(id).dataTable( {
"sScrollY": "200px",
"sScrollX": "100%", /* Required for viewing tables with lots of columns at low resolution - otherwise columns are mis-aligned */
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false,
"aoColumnDefs": [
{"bSearchable": false, "bSortable": false, "aTargets": ["dataTable-exclude"]},
{"bVisible":false,"aTargets":["dataTables_notVisible"]}
]
} );
[/code]

chimerical

But the th, tr, and td tags are generated by DataTable, so we can't manually assign a class in the HTML markup.

Could it be set somewhere in aoColumns in the Javascript?

allan

> fnSettings().aoColumns is null or not an object

I don't think I can even begin to explain that if it's working in other browsers! Does IE8 sometimes give this error as well? Does your alert() always show something useful (like [object Object]) in IE6/7, or is it undefined? What is jQuery(tag).dataTable().length?

Allan

bryceray1121

Sorry, I meant to explain the output of the alert.

In firefox it always prints out [object Object] - [object Object]
In IE it often ends up printing [object Object] - null
This is when i receive the error mentioned above.

--jQuery(tag).dataTable().length

I'm assuming by this you mean:jQuery(tag).dataTable().fnSettings().aoColumns.length. This is just a method to iterate through all the columns. I don't see any place that I attempt to use length directly on the data table method.

allan

No - I did mean "jQuery(tag).dataTable().length" - DataTables (like most jQuery methods) will return an array of objects, so what I was intending there was to check that it has been correctly picked up. You would expect that length to be 1 - if it's not, then that narrows the problem down to why the selector isn't finding the table.

The other variable which is worth inspecting is $.fn.dataTableSettings - perhaps using Firebug Lite in IE you'd be able to see what is in there (should be the settings for each table).

Allan

bryceray1121

when doing an alert on jQuery(tag).dataTable().length it always prints 1, even when the problem occurs. If you want, I can send you an example of the problem. I would rather not post the entire code publicly though.

allan

My access to an IE6/7 machine is a bit limited, but yes, please do send it through - http://datatables.net .

Does $.fn.dataTableSettings contain sensible information (i.e. objects) when you get the error in IE? I'm floundering a bit with this one...!

Allan

bryceray1121

It looked fine to me, I just sent the standalone code through your contact form if you want to take a look at the bug yourself. I also left some tips on how to view it in IE6/7.

allan

I think I've got it - the issue is with the use of iApiIndex, and can actually be reproduced with any browser. Simply load the page, then resize it and then click the "Details" button - error. This code is what is causing it:

[code]
$(window).resize(function() {
for(var i=0;i<(oTable.length);i++){
$.fn.dataTableExt.iApiIndex = i;
oTable.fnAdjustColumnSizing();
}
});
[/code]
So either just set iApiIndex here back to what it was, or in your fnShowHide function set it to 0. That should do it.

Thanks for packaging up the page to make it easier for me to load!

Allan