CODEWITHSUNDEEP
javascriptjquerydatatables
Mazhar MIK
Mazhar MIK

Reputation: 1192

key-focus not working in jquery plugin DataTables

i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ? This is my HTML file :

<!DOCTYPE html>
<html lang="en-US">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">   
</script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="tableScript.js"></script>
    <meta charset="UTF-8">
</head>

<body>
    <table id = "example" style="width:100%">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
</table>   

<div id="details"></div>
</body>
</html>

This is my JS file (tableScript.js) :

$(document).ready(function() {
    var table = $('#example').DataTable( {
    keys: true
} );

table
    .on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
        var rowData = datatable.row( cell.index().row ).data();

        $('#details').html( 'Cell in '+rowData[0]+' focused' );
    } )
    .on( 'key-blur', function ( e, datatable, cell ) {
        $('#details').html( 'No cell selected' );
    } );
});

It doesn't show any information in (#details). Any idea what's wrong here ?

Upvotes: 1

Views: 829

Answers (1)

Parth Raval
Parth Raval

Reputation: 4443

$(document).ready(function () {
  var table = $('#example').DataTable({
    keys: true
  });
  table
    .on('key-focus', function (e, datatable, cell, originalEvent) {
      var rowData = datatable.row(cell.index().row).data();

      $('#details').html('Cell in ' + rowData[0] + ' focused');
    })
    .on('key-blur', function (e, datatable, cell) {
      $('#details').html('No cell selected');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">   </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th align="right">Count</th>
      <th align="left"></th>
      <th align="left"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td contenteditable>4</td>
      <td contenteditable>5</td>
      <td contenteditable>6</td>
    </tr>
    <tr>
      <td contenteditable>7</td>
      <td contenteditable>8</td>
      <td contenteditable>9</td>
    </tr>
  </tbody>
</table>
<div id="details"></div>

Note :- You need to add dataTables.keyTable to bind key events

Upvotes: 1

Related Questions