Keystroke Pagination
Keystroke Pagination
Hi!
If you're like me, and pay special attention to user experience, you'd be happy to know there's an extremely simple way of adding Keystroke Pagination to your DataTable.
I'm no expert in jQuery, though I've implemented this myself in order to make life a little easier for my website users.
Anyway, here goes:
Download and include the jQuery Hotkeys Plugin from GitHub:
[code]https://github.com/jeresig/jquery.hotkeys[/code]
Now add the following to your document ready event:
[code]
$(document).ready(function() {
$(document).bind('keydown', 'right', function() {
$(".next").click();
});
$(document).bind('keydown', 'left', function() {
$(".previous").click();
});
});
[/code]
And that's all there is to it.
Test the functionality by navigating to your page, and then typing the left and right arrow buttons on your keyboard.
You can of course implement several other features this way, such as Delete = (Shift+Del) and so forth.
A bit dirty, but it works nonetheless :)
If you're like me, and pay special attention to user experience, you'd be happy to know there's an extremely simple way of adding Keystroke Pagination to your DataTable.
I'm no expert in jQuery, though I've implemented this myself in order to make life a little easier for my website users.
Anyway, here goes:
Download and include the jQuery Hotkeys Plugin from GitHub:
[code]https://github.com/jeresig/jquery.hotkeys[/code]
Now add the following to your document ready event:
[code]
$(document).ready(function() {
$(document).bind('keydown', 'right', function() {
$(".next").click();
});
$(document).bind('keydown', 'left', function() {
$(".previous").click();
});
});
[/code]
And that's all there is to it.
Test the functionality by navigating to your page, and then typing the left and right arrow buttons on your keyboard.
You can of course implement several other features this way, such as Delete = (Shift+Del) and so forth.
A bit dirty, but it works nonetheless :)
This discussion has been closed.
Replies
[code]
$(document).ready(function() {
$(document).bind('keydown', 'right', function() {
table.fnPageChange('next');
});
$(document).bind('keydown', 'left', function() {
table.fnPageChange('previous');
});
});
[/code]
This does of course assume that you only have one DataTable on the page and your users won't be using the left and right arrows for any other kind of interaction (such as scrolling if your page has horizontal scrolling, or text input element control), but key bindings such as this can be really useful for navigating quickly through a table.
Thanks for sharing this with us!
Allan
Anyway, as you've mentioned, some custom key bindings such as "Delete" shortcuts may very well be useful too when implemented in such a manner.
Thanks for the assistance Allan!