How can create an editable JQuery datatable

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.

1. Copy the dataTables.cellEdit.js to your project, you can place it under wwwroot/js

2. Reference it in your page

   <script src="~/js/dataTables.cellEdit.js"></script>

3. 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: