データテーブルのキーダウン時に行を選択解除する方法

Question

私はdatatablesを使用しています。選択とキーテーブルの機能を一緒に使用しようとしています。 this jsfiddleをご覧ください。

$(document).ready(function() { 
    $('#data-table') 
    .DataTable({ 
     "select": { 
     "style": "os" 
     }, 
     "keys": true 
     }).on('key-focus', function() { 
     $('#data-table').DataTable().row(getRowIdx()).select(); 
    }) 
    .on('click', 'tbody td', function() { 
     var rowIdx = $('#data-table').DataTable().cell(this).index().row; 
     $('#data-table').DataTable().row(rowIdx).select(); 
    }).on('key', function(e, datatable, key, cell, originalEvent) { 
     if (key === 13) { 
     var data = $('#data-table').DataTable().row(getRowIdx()).data(); 
     $("#output").html("Code: " + data[0] + ". Description: " + data[1]); 
     } 
    }); 
}); 

function getRowIdx() { 
    return $('#data-table').DataTable().cell({ 
    focused: true 
    }).index().row; 
} 

私がクリックした最初の行を非選択にしない限り、キーを押したときを除いて、ほとんど完璧に機能します。まるでシフトキーを押したように振る舞います。

私が2番目の問題は、Enterキーを押すと最初の列データが表示されますが、行IDを表示する必要があることです。

あなたはまた、tableとしての代わりに、毎回それを呼び出す$('#data-table').DataTable()の参照を保持select()

前deselect()すべての行を使用する必要があるこの2つの問題

Answer 1

を解決するために私を助けることができれば、私は多くのことをいただければ幸いです。

$(document).ready(function() { 
 
    var shiftKey, ctrlKey, table = $('#data-table').DataTable({ 
 
     select: { style: 'os' }, 
 
     keys: true 
 
    }).on('key-focus', function() { 
 
     if(!shiftKey && !ctrlKey) table.rows().deselect(); 
 
     table.row(getRowIdx()).select(); 
 
    }) 
 
    .on('key', function(e, datatable, key, cell, originalEvent) { 
 
     if (key === 13) { 
 
     var data = table.row(getRowIdx()).data(); 
 
     $('#output').html('Code: ' + data[0] + '. Description: ' + data[1]); 
 
     } 
 
    }); 
 
    
 
    function getRowIdx() { 
 
    return table.cell({ focused: true }).index().row; 
 
    } 
 
    $(document).on('keyup keydown', function(e){ 
 
    shiftKey = e.shiftKey; 
 
    ctrlKey = e.ctrlKey; 
 
    return true; 
 
    }); 
 
});

table.dataTable th.focus, 
 
table.dataTable td.focus { 
 
    outline: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script> 
 
<link href="https://cdn.datatables.net/keytable/2.1.1/css/keyTable.dataTables.css" rel="stylesheet" /> 
 
<script src="https://cdn.datatables.net/keytable/2.1.1/js/dataTables.keyTable.min.js"></script> 
 

 
<div>Result: <span id="output"></span></div><br/> 
 
<table id="data-table" class="display compact articulos table0"> 
 
    <thead><tr><th>Code</th><th>Description</th></tr></thead> 
 
    <tbody> 
 
    <tr id="1001"><td>1</td><td>Description 1</td></tr> 
 
    <tr id="1002"><td>2</td><td>Description 2</td></tr> 
 
    <tr id="1003"><td>3</td><td>Description 3</td></tr> 
 
    <tr id="1004"><td>4</td><td>Description 4</td></tr> 
 
    <tr id="1005"><td>5</td><td>Description 5</td></tr> 
 
    </tbody> 
 
</table>