scope and 508 compliance

canopus

Hey All,

I was hoping for some advice on adding scope = "col" to my table column headers. I already changed the first cell of my rows to a and added scope = 'row' using another post here, but I also need to add scope = "col" to my column headers. Is there a way to add it to my aoColumns definitions?

Here's my code. BTW, I am passing a list of table data through to datatables to generate the table, so there is no HTML in the template (where I'd normally add my scope.)

[code]

$(document).ready(function() {
$('#rules').html( '' );
$('#rules_table').dataTable( {
"bProcessing": true,
"bAutoWidth":false,
"bDeferRender": true,
"aaSorting": [],
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aoColumnDefs": [{ "sType": "html", "aTargets": [ 0 ] },
{"aTargets": [ 0 ], "sCellType": "th", "fnCreatedCell": function ( cell ) { cell.scope = 'row'; }},
{ "bVisible": false, "aTargets": [ 4 ] }],
"sDom": '<"group_head"ip<"clear">><"clear">W<"clear"T>lrt<"group_head"ip<"clear">>',
"oTableTools": {
"sSwfPath": "/apps/tools/ruleorganizer/static/js/DataTables-master/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [ "xls" ]},
"oColumnFilterWidgets": {"aiExclude": [0,1,8,9,10], "sSeparator": "\\s*,+\\s*"},

"aaData": rule_list,
"aoColumns": [
{ "sTitle": "ID", "sClass": "rules_table_md"},
{ "sTitle": "Description", "sClass": "rules_table_lg"},
{ "sTitle": "Category", "sClass": "rules_table_lg" },
{ "sTitle": "Applicability", "sClass": "rules_table_lg" },
{ "sTitle": "Type", "sClass": "rules_table_sm"},
{ "sTitle": "Status", "sClass": "rules_table_md" },
{ "sTitle": "Rule Creator", "sClass": "rules_table_md" },
{ "sTitle": "Rule Steward", "sClass": "rules_table_md" },
{ "sTitle": "Date Created/Rev.", "sClass": "rules_table_md" },
{ "sTitle": "Comments", "sClass": "rules_table_lg" },
{ "sTitle": "Technical Comments", "sClass": "rules_table_lg" }

]
} );
} );[/code]

allan

> Is there a way to add it to my aoColumns definitions?

No - you'd do it with a bit of jQuery after you've initialised the table:

[code]
table.$('tr td:eq(0)').attr('scope', 'row');
[/code]

or similar.

The other option is to use the fnRowCreated or fnCellCreated callbacks and manipulate the DOM at that point.

Allan

canopus

Hi Allan,

Thanks would it work the same way for columns, like

[code]
table.$('tr td:eq(0)').attr('scope', 'col');
[/code]
?

Thanks!

allan

Yes - you probably need to use the `:nth-child` selector to get the cells for the whole column.

Allan