Keytable: is it working? How do I know?

uiguy

I have tried installing keytable with datatables but it doesn't seem like it's working. Here's the integration code:

[code]

$(document).ready(function() {

var oTable = $('#results').dataTable( {
"aaSorting": [[ 4, "desc" ]],
"bJQueryUI": true,
"bFilter": false,
"bAutoWidth": false,
"sWidth": "50%",
"sPaginationType": "full_numbers",
"sDom": '<"topL"i>rt<"topR"l>rt<"bottom"p>',
"aoColumns" : [null, null, { "bSearchable": true, "bVisible": false },{ "bSearchable": true, "bVisible": false }]

} );
var keys = new KeyTable( {
"table": document.getElementById('results'),
"datatable": oTable
} );

} );

[/code]

Did I miss something here?

uiguy

Can anyone help answer this? I just can't tell if I've implemented it correctly because I have no way to know if it's working.

allan

Does it not highlight a cell like in the example: http://datatables.net/release-datatables/extras/KeyTable/index.html (assuming you have defined the CSS required to do the highlighting).

Allan

uiguy

Not that I've been able to see. Maybe it's an issue with the CSS...I'll have to look again.

So that's how I can tell it's working? Ensure the CSS is correct and it should always highlight the cells?

Also, does keytables address the issue with the pagination not being accessible?

Thanks Allan..

allan

Use Firebug to look at the DOM for the table and see if the KeyTables focus class is added to the currently focused cell.

> Also, does keytables address the issue with the pagination not being accessible?

To some extent I guess it could be considered as such. It does allow pagination via the keyboard, but the real solution is to make the pagination directly accessible itself by first using A tags for the pagination elements and also adding ARIA support.

Allan

uiguy

Arg...still no go. Nothing in the DOM. Once you mentioned the CSS it made me dig deeper and find it. It's not included in the download examples so you have to dig pretty deep to figure it out. I've tried multiple ways to integrate it but it just won't work. Of course, I could be missing a syntax issue since I'm no JS guru :)

So here's what I've got (per your example), but I still have no keytables functionality:
[code]

oTable = null;
hidden_column = 2; // change this to the index of your column
$(document).ready(function() {
var oTable = $('#results').dataTable( {
"bJQueryUI": true,
"bAutoWidth": true,
"sWidth": "50%",
"aoColumns" : [null, null, { "bSearchable": true, "bVisible": false }],
"sPaginationType": "full_numbers",
"sDom": '<"topL"i>rt<"topR"l>rt<"bottom"p>'
} );
var keys = new KeyTable( {
"table": document.getElementById('results'),
"datatable": oTable
} );
} );

[/code]

First line of table:
[code]

[/code]

CSS:
[code]
/*
* KeyTable
*/
table.KeyTable td {
border: 3px solid transparent;
}

table.KeyTable td.focus {
border: 3px solid #3366FF;
}

table.display tr.gradeA {
background-color: #eeffee;
}

table.display tr.gradeC {
background-color: #ddddff;
}

table.display tr.gradeX {
background-color: #ffdddd;
}

table.display tr.gradeU {
background-color: #ddd;
}

div.box {
height: 100px;
padding: 10px;
overflow: auto;
border: 1px solid #8080FF;
background-color: #E5E5FF;
}
[/code]

tedkalaw

Hey there,

The CSS rules are looking for a table with the class "KeyTable". To test it out, make it so it is "table", not "table.KeyTable."

Are you positive that the class "focus" is not being applied to elements that you click on?

uiguy

Thanks for the input. Unfortunately it didn't work :( Yes I'm sure there's no focus.

Here's my updated CSS but there were no changes:
[code]

/*
* KeyTable
*/
table td {
border: 3px solid transparent;
}

table td.focus {
border: 3px solid #3366FF;
}

table.display tr.gradeA {
background-color: #eeffee;
}

table.display tr.gradeC {
background-color: #ddddff;
}

table.display tr.gradeX {
background-color: #ffdddd;
}

table.display tr.gradeU {
background-color: #ddd;
}

div.box {
height: 100px;
padding: 10px;
overflow: auto;
border: 1px solid #8080FF;
background-color: #E5E5FF;
}
[/code]