How to Operate jquery datatable rows with keyboard arrow keys

Question

How to operate datatable(jquery plugin) rows with keyboard arrow keys. I did something

var oTable;
    $("#customerdata tbody").click(function(event) {
            $(oTable.fnSettings().aoData).each(function (){
                    $(this.nTr).removeClass('row_selected');
            });
            var row = $(event.target.parentNode);
            row.addClass('row_selected');
            var custid=row.find('td:first').text();
            if(custid!="No data available in table"){
                $('#cust_id').val(custid);
            $('#customerdata_filter input').val('');
            $("#editmodal").dialog("close");}
    });        

    oTable = $("#customerdata").dataTable({
    "bJQueryUI": true,
            "bLengthChange": false,
            "bPaginate": false,
    "sPaginationType": "full_numbers",
            "bProcessing": true,
    "bServerSide": true,
            "sScrollY": "260px",
    "sAjaxSource": "/SrikanthTest/customer.do?type=showMinCustomerDetails"
});

But i don't know how to operate the cursor over the rows.

There is a plugin by the same author you might be interested in, it's called KeyTable sprymedia.co.uk/article/KeyTable — Vinko Vrsalovic
– Vinko Vrsalovic, Commented Oct 5, 2011 at 11:31

Ruben-J · Accepted Answer · 2012-06-05 12:45:19Z

3

I think you are looking for something like this, but i need more context to be sure.

$(document).keydown(function (event) {
    switch(event.keyCode)
    {
        var currentRow = $(".row_selected").get(0);
        //arrow down
        case 40:
            $(currentRow).next().addClass("row_selected");
            $(currentRow).removeClass("row_selected");
            break;
        //arrow up
        case 38:
            $(currentRow).prev().addClass("row_selected");
            $(currentRow).removeClass("row_selected");
            break;

    }
});

answered Jun 5, 2012 at 12:45

Ruben-J

2,69317 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:05:31Z

0

I've posted an example that works also with dynamically loaded paged tables in this jQuery dataTables and selecting a row

However, I've used the tab key for usability. I believe it will be easy to change one for another.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jun 20, 2013 at 8:12

opalenzuela

3,16923 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to Operate jquery datatable rows with keyboard arrow keys

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related