Keystroke Pagination

Rookie

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 :)

allan

The API ( fnPageChange ) presents a cleaner way to do it :-)

[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

Rookie

Aah! Thanks for the reference Allan. In future, I'll be sure to go in-depth with the documentation for pre-existing features first. Doh! lol.

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!