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 need to handle cell click event ourselves and prevent the event from propagating further.

Credits

This solution was initially suggested by user ffradegrada in How to use Select plugin and KeyTable plugin together post on jQuery DataTables forum.

Recommended For You

Books

Online Courses

You Might Also Like

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)