Replies

• uiguy Posts: 9Questions: 0Answers: 0

  July 2011

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2011

  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 Posts: 9Questions: 0Answers: 0

  July 2011

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  July 2011

  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 Posts: 9Questions: 0Answers: 0

  July 2011

  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 Posts: 12Questions: 0Answers: 0

  July 2011

  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 Posts: 9Questions: 0Answers: 0

  July 2011

  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]