Making the datatable 508 compliant

JohnJJordan

I am trying to get my table to output the body with the first column as a for 508 compliancy. I have set up my table as shown below. I looked at the examples on this site, and I cannot find a definitive way to make it create the for the first column in each row. What do I need to do to make this work.







Title
State
Health Topic
Policy Topic
Type
Setting
Status
Year

allan

Hi,

If you are creating your table from the DOM, then you are already doing everything you need to do! DataTables will keep the scope attribute you set on the TH cells. I've got an example of using the scope like that here: http://datatables.net/blog/Creating_beautiful_and_functional_tables_with_DataTables .

If however you are creating the table and the rows dynamically, then you'll need to use a little bit of Javascript to add the required property as DataTables doesn't have a built in method to do it. Using 1.9:

[code]
oTable.$('th').attr('scope', 'row');
[/code]

is all that is needed, where oTable is the DataTables instant for your table.

Regards.
Allan

JohnJJordan

Allan
Sorry form my deplayed response. I got pulled off to other tasks for a while and I just coming back to this issue.

I am using the data structure as mentioned above, however my table is not putting ... Instead I am getting a Here is my initialization code. I am just not seeing that I am doing anything wrong. Key points may be that I am doing server side processsing. Not sure if that matters or not.,..

function InitializeDataTables() {
// the datatable, see datatables.net for API
oTable = $('#output').dataTable({
"bProcessing": true,
"bFilter": false,
"bServerSide": true,
"bDeferRender": true,
"bAutoWidth": false,
"sDom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>',
"aLengthMenu": [[25, 50, 100], [25, 50, 100]],
"iDisplayLength": 25,
"sAjaxSource": "service.svc/GetPolicies",
"sAjaxDataProp": "Results.Policies",
"bPaginate": true,
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (!aData['hasRelatedPolicies']) {
$(nRow).find('#flag').hide();
}
return nRow;
},
"fnDrawCallback": function(oSettings) { fnInitFacets($.parseJSON(oSettings.jqXHR.responseText)); },
"fnServerParams": function(aoData) {
var value = GetSelectedValues();
aoData.push({ "name": "facets", "value": value });
},
"sPaginationType": "full_numbers",
"aaSorting": [[8, 'desc']],
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "Title" },
{ "mDataProp": "State" },
{ "mDataProp": "HealthTopic" },
{ "mDataProp": "PolicyTopic" },
{ "mDataProp": "Type" },
{ "mDataProp": "Setting" },
{
"bSortable": false,
"mDataProp": null,
"sClass": "relatedflag",
"sDefaultContent": ''
},
{ "mDataProp": "Status" },
{ "mDataProp": "Year" },
{ "mDataProp": "hasPolicyElements", "bVisible": false },
{ "mDataProp": "hasRelatedPolicies", "bVisible": false },
{ "mDataProp": "Abstract", "bVisible": false },
{ "mDataProp": "ID", "bVisible": false }
]
});

I would appreciate if you could offer me some insight as to what I may be doing wrong. I do not know of a way to change the first column from a td to a th.

Thanks

John

allan

Ah I see - you are using server-side processing rather than a client-side DOM source. With a DOM source then DataTables will retain whatever you give it, but with server-side processing, DataTables will create the DOM needed.

> I do not know of a way to change the first column from a td to a th.

I'm afraid that DataTables currently does not have an option for this. However it is certainly a good idea to allow columns to be created with TH elements rather than TD - I've made a note to add this for the next version as a column option. Great suggestion - thanks!

Regards,
Allan

JohnJJordan

For the sake of reporting to my project manager, how long does it typically take to get a feature like this added. This is for US government website and 508 compliancy is a major issue. I think it would be great if we had a property that indicated whether the table should support Readers...and have it handle it for you.

allan

I suspect it would probably only take an hour to implement, its just a case of making the time to do it and properly test it. I'll try to do so as soon as possible. It is also worth noting that the whole column would be affected, it wouldn't be just one or two cells in the column, but all cells in that column that DataTables creates.

Regards,
Allan

JohnJJordan

Would buying support help get this done quicker. I do not technically have a real budget for this type of activity, but I am sure I can go out of pocket for another hour. Also I would be willing to help you test this. I am using a lot of the features and functions in the server side processing.

I am assuming that what you mean that every cell in the column would be effected means that every row's first column would be a . This is what I would expect. If you meant something else then please clarify

allan

Yes support would let me create time sooner - sorry, I don't mean to hold you to ransom. I will get around to adding this feature (hopefully this week actually) regardless of support as I think it is a really worth while addition, but support does allow me to focus efforts.

> I am assuming that what you mean that every cell in the column would be effected means that every row's first column would be a .

That's exactly it! :-)

Regards,
Allan

allan

Getting a chance to do this took a lot longer than I had thought, but it is now done :-). 1.9.1 (due for release shortly) has a new column option called sCellType which can be set to "td" (default) or "th" to create TH cells for a column.

Regards,
Allan

JohnJJordan

Allan,

Thanks for getting this added. It is very timely indeed. I will be sending some more support money your way shortly. I am waiting to get some money from my customer. I have a quick question related to the scope="row" attribute. do I have to add that through some script or is there another option I need to add to make this work.

allan

Hi - great to hear that you'll be able to make use of this :-). To add the scope attribute, you can do something like this:

[code]
var table = $('#example').dataTable{ {
"sAjaxSource": "ajax",
"aoColumnDefs": [
{
"aTargets": [0],
"sCellType": "th",
"fnCreatedCell": function ( cell ) {
cell.scope = 'row';
}
}
]
} );
[/code]

That initialises the table to use a TH in the first column and adds a scope attribute when the cell is created. Another option would be to use something like

[code]
table.$('th').attr('scope', 'row');
[/code]

once the table has initialised.

Allan