Keytable: is it working? How do I know?

Keytable: is it working? How do I know?

uiguyuiguy Posts: 9Questions: 0Answers: 0
edited June 2011 in KeyTable
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?

Replies

  • uiguyuiguy Posts: 9Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,438Questions: 1Answers: 10,051 Site admin
    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
  • uiguyuiguy Posts: 9Questions: 0Answers: 0
    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..
  • allanallan Posts: 61,438Questions: 1Answers: 10,051 Site admin
    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
  • uiguyuiguy Posts: 9Questions: 0Answers: 0
    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]
  • tedkalawtedkalaw Posts: 12Questions: 0Answers: 0
    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?
  • uiguyuiguy Posts: 9Questions: 0Answers: 0
    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]
This discussion has been closed.