JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="datatable-example table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td data-sort="40" data-search="40">
<input type="text" value="40" class="userage">
</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td data-sort="30" data-search="30">
<input type="text" value="30" class="userage">
</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td data-sort="20" data-search="20">
<input type="text" value="20" class="userage">
</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td data-sort="10" data-search="10">
<input type="text" value="10" class="userage">
</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
JavaScript
$(".userage").on("keyup", function(event) {
if (event.keyCode == 13) {
var age = $(this).val();
alert("age : " + age);
// What is the best and efficient way to access datatable row and datatable object from this event?
var row = $(this).closest("tr");
var oTable = $(row).closest(".datatable-example").DataTable(); // Datatable reference
// How to refresh cell cache with the new value in the text field in order to make the sort of the column right
var tr = oTable.row(row);
var indexRow = row.index();
var currentCell = tr.data();
console.log(currentCell);
var cellContent = oTable.cell(indexRow, 4).data();
console.log(cellContent);
}
});
// DataTable
var table = $('#example').DataTable({
});