I am having trouble capturing keydown events using JQuery DataTable. My goal is to allow users to navigate the rows of the table using the arrow keys. Therefore, I would like to catch keydown events and move the table's selected row (this is something I am keeping track of outside the datatable using a class for the selected row) when a user presses the arrow key. However, I cannot seem to catch the keydown events.
For example, the code below does not work:
$('#myTable tbody').keydown(function (event){...});
My thought is that the issue is the table does not have focus, but perhaps this is the wrong path. For example, even if I add the following, I do not catch keydown events with the above code:
$('#myTable tbody').click(function(e){ $('#myTable tbody').focus();});
I can catch the keydown with the $(document) but this is not desirable.
Thanks.
Here's a working solution...code could be cleaned up a bit (and there are bugs, e.g. no limit checking), but the effect is there:
http://jsfiddle.net/BLSully/Xdkea/
The 'key' is giving the table a tabindex so it becomes "focusable". It does not need to be zero, but it needs to be "something" so that the keypress events work on it
<table id="myTable" tabindex=0>
<tbody>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
</tbody>
</table>
JavaScript:
$(function(){
var focusedRow = null;
$('#myTable').on('keydown', function(ev){
console.log(ev.keyCode);
if(focusedRow == null) {
focusedRow = $('tr:nth-child(1)', '#myTable');
} else if(ev.keyCode === 38) {
focusedRow.toggleClass('focused');
focusedRow = focusedRow.prev('tr');
} else if(ev.keyCode === 40) {
focusedRow.toggleClass('focused');
focusedRow = focusedRow.next('tr');
}
focusedRow.toggleClass('focused');
});
$('#myTable').focus();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With