DataTables KeyTable move focus on enter

u2624

There is a table, the cells contain inputs (hidden and/or number) or text.

I added KeyTable with this configuration:

 jQuery('.datatable').DataTable({
         "keys": true,
         "paging": false,
         "ordering": false,
         "info": false,
         "searchHighlight": true,
        "lengthMenu": [[10, 30, 50, 100, 200, 500, -1], [10, 30, 50, 100, 200, 500, "All"]],
        "pageLength": 100
    }).on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
      
        $('input', cell.node()).focus();
 
    } ).on("focus", "td input", function(){
        $(this).select();
    });
    
    $('.datatable tbody')
        .on( 'mouseenter', 'td', function () {
            var colIdx = table.cell(this).index().column;
 
            $( table.cells().nodes() ).removeClass( 'highlight' );
            $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
        } )

The goal would be:
* use navigation only for cells which contain input[type="number"]
* when the user press ENTER key, move the focus to the next cell's input, like he pressed RIGHT key

Any help would be appreciated

colin

Hi @u2624 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

u2624

Hi, thanks a lot
http://live.datatables.net/nawijopa/1/edit

colin

Ah, I see, thanks.

use navigation only for cells which contain input[type="number"]

It appears to be doing that now, unless I'm missing something.

when the user press ENTER key, move the focus to the next cell's input, like he pressed RIGHT key

You would need to do something like this. I had to update your libraries as keys.move() was introduced after the version you were using.

Cheers,

Colin

u2624

woho, perfect, the library update was the key, I tried some similar. It works very well.
But not the first question:
When I in the first data row (M0) and column M and press right, the focus moves right where is no input field (only a hidden one). I tried to limit the columns but there are columns which not always contain numeric inputs like when you check the M colum, only the first few rows has input cells.

u2624

I managed to solve it.
Just one tiny question: This is a bootstrap table with table-hover, so the hovered table row is a bit more dark. Can I tigger it with KeyTable too? Highlighting the active row?

allan

The KeyTable focus happens on a single cell only - not a whole row. Also the hover state used by Bootstrap is a pseudo class (:hover).

The way to do what you are looking for is to listen for the key-focus event and add a class to the row for the cell that was focused. You'd then need to use a little CSS to apply a suitable background to the cells in that row. Use key-blur to remove the class when the cell is blurred.

Allan

u2624

Thanks a lot.
And (I hope) the last one.
Is it possible to add a bottom margin to keytables?
This is what I mean:
When I move down with KeyTable and got to the bottom of the window, there is a fixed footer bar and the active cell is behind this footer bar. Also want to get a bit gap under the active cell even if it's at the bottom of the window.
If you check the example above (http://live.datatables.net/nawijopa/3/edit) you can see this: https://snipboard.io/NgA2IL.jpg
I want to add a "margin" below this cell and not to stuck to the bottom of the window.
Is there a solution for that?

allan

That's interesting. There is a little bit of code in KeyTable that checks to see if the focused cell is in the window's viewport, but it looks like that isn't taking into account the horizontal scrollbar. That's a bug.

However, that won't address the point about wanting to have a bit more space after the focused cell.

For that (and to workaround the bug at the same time) you'd need to use the key-focus event again and get the position of the focused cell in the viewport. If it is outside the window, or in the window but outside the margin you want you'd change the scrollTop of the document to make it fit.

Allan