comment désélectionner une ligne sur le clavier dans les données

Question

J'utilise datatables. Essayer d'utiliser les fonctions select et keytable ensemble. S'il vous plaît voir this jsfiddle. Il fonctionne presque parfaitement, sauf lorsque la touche enfoncée ne désélectionne pas la première ligne sur laquelle j'ai cliqué. Il agit comme si j'avais appuyé sur la touche Maj.

Mon deuxième problème, lorsque j'appuie sur Entrée, affiche les données de la première colonne mais j'ai besoin d'afficher l'identifiant de ligne.

Je vous serais reconnaissant beaucoup si vous pouviez me aider à résoudre ces deux problèmes

Answer 1

vous devez utiliser deselect() toutes les lignes avant select()

aussi garder une référence de $('#data-table').DataTable() comme table au lieu de l'appeler à chaque fois.

$(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>