M.Gea M.Gea - 6 months ago 38
Javascript Question

DataTable Select Extension / Navigation with keydown

i'm using Datatable and i have implemented the Select() extension on in, and i want to implement a function that allow the user to navigate on the table with keyup and keydown, but i don't know how can i do that.
I tried this, but only remove work:



$('#example tbody').on( 'click', 'tr', function () {
var tr = $(this);
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
//on keypress within tr
$(document).keydown(function(e) {
var tabla = document.getElementById("example");
var fila = tabla.getElementsByClassName('odd selected');
var fila2 = tabla.getElementsByClassName('even selected');
if (e.keyCode == 40){ //arrow down
tr.next().addClass('selected');
table.$('tr.selected').removeClass('selected');
}
if (e.keyCode == 38){ //arrow up
tr.prev().addClass('selected');
table.$('tr.selected').removeClass('selected');
}
})
} );



Can anyone help me?

EDIT: this is my HTML


<button id="addRow">Insertar fila</button>
<button id="saveData">Guardar datos</button>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-condensed" width="100%" id="example">
<thead>
<tr>
<th width="10%">NIF/NIE</th>
<th width="10%">1er Apellido</th>
<th width="10%">2do Apellido</th>
<th width="10%">Nombre</th>
<th width="10%">Sexo</th>
<th width="10%">Fecha Nacimiento</th>
<th width="10%">Fecha Contrato</th>
<th width="10%">Demandante empleo larga duraciĆ³n</th>
<th width="10%">Tipo Contrato</th>
<th width="10%">% Jornada</th>
<th width="10%">Discap.</th>
<th width="10%">Causas Archivo. (1)</th>
<th width="10%">Aut. SCSP</th>
<th width="10%">Imp.Solic.</th>
<th width="10%">Sust.</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>





i'm adding by ajax the datas.

Answer

Because the lines to remove and add selected class should be in opposite order, here is what needs to be changed in your code

 if (e.keyCode == 40){ //arrow down

       // original lines
       //tr.next().addClass('selected');
       //table.$('tr.selected').removeClass('selected');

       // new lines, with order changed
       table.$('tr.selected').removeClass('selected');
       tr.next().addClass('selected');

  }
  if (e.keyCode == 38){ //arrow up

       // same here switch the lines
       table.$('tr.selected').removeClass('selected');
       tr.prev().addClass('selected');

   }
Comments