DataTables

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 <th scope="row">... Instead I am getting a <td> 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": '<img src="' + sImageUrl + 'bullet_toggle_plus.png' + '">'
},
{ "mDataProp": "Title" },
{ "mDataProp": "State" },
{ "mDataProp": "HealthTopic" },
{ "mDataProp": "PolicyTopic" },
{ "mDataProp": "Type" },
{ "mDataProp": "Setting" },
{
"bSortable": false,
"mDataProp": null,
"sClass": "relatedflag",
"sDefaultContent": '<img id=flag src="' + sImageUrl + 'flag_red.png' + '">'
},
{ "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

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.

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 <th scope='row'>. This is what I would expect. If you meant something else then please clarify

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

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:

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

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

table.$('th').attr('scope', 'row');

once the table has initialised.

Allan