KEY-FOCUS not working in my datatables
KEY-FOCUS not working in my datatables
Mazhar123
Posts: 17Questions: 4Answers: 0
Hi all, i was trying to learn key-focus in my datatable but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
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>
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' );
} );
} );
Any help will be highly appreciated
This discussion has been closed.
Answers
It doesn't show any information in (#details). Any idea what's wrong here ?
Hi @Mazhar123 ,
It's working here for me. Could you look at that, please, and see if there are any clues. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.
Cheers,
Colin
Thanks @colin , It's now working. Actually i had not included the dataTables.KeyTable.js file.
Thanks again.
Regards,
Mazhar