How can create an editable JQuery datatable - html

Question

I am creating an editable JQuery data-table from the model list . I want to edit some of the column [Rate, Qty, IsBranded, Description] of each record listed in a table. My code is given below.
ProductModel
Id int
Name string
Rate decimal
Qty int
Price decimal
Description string
Html and Javascript
<script type="text/javascript">
$("document").ready(function () {
$('#tbllist').DataTable();
});
</script>
#model List<Product>
<table id="tbllist" class="cell-border" style="width:100%">
<thead class="thead-light">
<tr>
<td>Name</td>
<td>Rate</td>
<td>Qty</td>
<td>total</td>
<td>IsBranded</td>
<td>Description</td>
</tr>
</thead>
<tbody>
#if (Model != null)
{
for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>#Model[i].Name</td>
<td>#Model[i].Rate</td>
<td>#Model[i].Qty</td>
<td>#Model[i].total</td>
<td><input type="checkbox" #(Model[i].IsBranded ? "checked" : "") /></td>
<td>#Model[i].Description</td>
</tr>
}
}
</tbody>
</table>
I want to make edit Rate,Qty, Description, IsBranded column. It would be very appreciated , if someone can help me with appropriate code to make .
With Thanks
Alan

Answer 1

I made an example based on #StéphaneLaurent comment, hope it can work for you.
Copy the dataTables.cellEdit.js to your project, you can place it under wwwroot/js
Reference it in your page
<script src="~/js/dataTables.cellEdit.js"></script>
Then follow the tutorial.
#model List<ProductModel>
<table id="tbllist" class="cell-border" style="width:100%">
<thead class="thead-light">
<tr>
<td>Name</td>
<td>Rate</td>
<td>Qty</td>
<td>Total</td>
<td>IsBranded</td>
<td>Description</td>
</tr>
</thead>
<tbody>
#if (Model != null)
{
for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>#Model[i].Name</td>
<td>#Model[i].Rate</td>
<td>#Model[i].Qty</td>
<td>#Model[i].Total</td>
<td><input type="checkbox" #(Model[i].IsBranded ? "checked" : "") /></td>
<td>#Model[i].Description</td>
</tr>
}
}
</tbody>
</table>
#section scripts{
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="~/js/dataTables.cellEdit.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
<script type="text/javascript">
var table = $('#tbllist').DataTable();
function myCallbackFunction(updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
</script>
}
Result: