CODEWITHSUNDEEP
javascriptjquerydatatablesonkeydown
Johnny
Johnny

Reputation: 1725

how to unselect a row on keydown in datatables

I am using datatables. Trying to use select and keytable features together. Please see 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;
}

It almost works perfect except when press key down it doesn't unselect the first row that I clicked. It acts like as if I have pressed the shift key.

My second problem that when I press enter it shows the first column data but I need to show the row id.

I would appreciate a lot if you could help me to solve these two problems

Upvotes: 0

Views: 1533

Answers (1)

Ja9ad335h
Ja9ad335h

Reputation: 5075

you need to use deselect() all rows before select()

also keep a reference of $('#data-table').DataTable() as table instead of calling it everytime.

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

Upvotes: 1

Related Questions