jQuery DataTables: How to navigate rows with KeyTable plug-in

Solution 1: Using KeyTable plug-in only

Example

Use UP and DOWN keys to navigate table rows. Use ENTER key to display selected row details.

Highlights

Row selection is implemented by limiting keys that KeyTable plug-in listens for to just UP, DOWN and optionally ENTER keys. This is done by using keys.keys option. ENTER key can be used to perform some action. In the example above I display selected row details when ENTER is pressed.

Extra CSS rules are needed to hide cell highlighting used by KeyTable plug-in.

I added handlers for key-focus and key-blur events to control row highlighting by adding or removing predefined class selected to corresponding tr element.

Solution 2: Integrating Select and KeyTable plug-ins

Example

Use UP and DOWN keys to navigate table rows. Use ENTER key to display selected row details.

Highlights

This solution uses the same idea to limit keys that KeyTable plug-in listens for.

Select plug-in used to select/deselect rows by using row().select() API method instead of adding/removing selected class.

Both KeyTable and Select plug-ins listen for cell click event which results in undesired behavior with row selection. To solve that problem, we handle cell click event ourselves and prevent the event from propagating further.