How to focus on first visible cell in a table

mustafamond

I would like to set the focus on the first visible cell in a table when hitting <tab> when in the "Search" field. I have scroller and keytable enabled.

table.cell(':eq(0)').focus(); will work if the datatable has not been filtered yet (no search terms) and if the top of the table is visible. If scrolling has happened, the focus will scroll the user back to the top of the list and focus on the first element. If the user has performed a search limiting the rows that show up, the focus does not change at all. How does one detect which row is currently visibly displayed at the top of the visible list and focus on that?

kthorngren

If you inspect the page you will see all of the rows in the scroll buffer are in the DOM, not just the rows being displayed.

The scroller.page() will provide the range of rows being displayed. You can use that to pass the row in the cell() call, ie cell( rowSelector, columnSelector ). See this example:
http://live.datatables.net/gohupufi/1/edit

Kevin

mustafamond

Thank you for the response and the example.

If there are no search terms and the list is unfiltered, the focus button works as expected - the top visible item gets the little blue border even if you have scrolled into the list and the first item is not in the visible window. If the list is filtered (for example, type "ce" into the search box so that Caesar Vance shows up as the top item in the list) - clicking the focus button does nothing. Is it possible for the focus to work if the list is filtered and some items from the full list are not in the filtered list?

kthorngren

Looks like adding the selector-modifier of {search: 'applied'} works.
http://live.datatables.net/gohupufi/2/edit

Kevin

mustafamond

Works great!

Quick question - would there be a reason it focuses on the second column instead of the first in my case? Not a big deal, but weird...

kthorngren

would there be a reason it focuses on the second column instead of the first in my case? Not a big deal, but weird..

Can you update the test case to show the issue or post a link to your page?

You have ':eq(0)' for the second parameter?

Kevin