Edit record using jQuery DataTable Plugin in ASP.Net

Hi onais,

Check this example. Now please take its reference and correct your code.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "CustomerService.asmx/GetCustomers",
                success: function (data) {
                    var datatableVariable = $('#tblCustomers').DataTable({
                        data: data,
                        columns: [
                        { 'data': 'CustomerId' },
                        { 'data': 'Name' },
                        { 'data': 'Country' },
                        {
                            "data": null,
                            "bSortable": false,
                            "mRender": function (data, type, full) {
                                return '<input type="button" id="btnEdit" class="btn btn-info btn-sm" value="Edit"  />';
                            }
                        }
                     ]
                    });
                    datatableVariable.columns().every(function () {
                        var column = this;
                        $(this.footer()).find('input').on('keyup change', function () {
                            column.search(this.value).draw();
                        });
                    });
                    $('[id*=btnEdit]').on('mousedown', function () {
                        if ($(this).val() == 'Edit') {
                            $(this).val('Save');
                            var $row = $(this).closest("tr").off("mousedown");
                            var $tds = $row.find("td").not(':first').not(':last');
                            $.each($tds, function (i, el) {
                                var txt = $(this).text();
                                $(this).html("").append("<input type='text' value='" + txt + "'>");
                            });
                        }
                        else if ($(this).val() == 'Save') {
                            $(this).val('Edit');
                            var $row = $(this).closest("tr");
                            var $tds = $row.find("td").not(':first').not(':last');
                            var id = $row.find('td').eq(0).html();
                            var name = $row.find("input").eq(0).val();
                            var country = $row.find("input").eq(1).val();
                            $.each($tds, function (i, el) {
                                var txt = $(this).find("input").val();
                                $(this).html(txt);
                            });
                            alert('Updated Name: ' + name + '\n\rUpdated Country: ' + country);
                            // Make Ajax call to save the updated value in Database.
                        }
                    });
                }
            });
        }); 
    </script>
    <div class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="content">
                    <form id="form1" runat="server">
                    <div>
                        <h1 align="center">
                            Customer Details</h1>
                    </div>
                    <div style="width: 1000px;">
                        <table id="tblCustomers" class="table table-responsive table-hover ">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Country</th>
                                    <th>Edit</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Country</th>
                                    <th>Comment</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

CustomerService.asmx

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

/// <summary>
/// Summary description for CustomerService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class CustomerService : System.Web.Services.WebService
{
    public CustomerService()
    {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public void GetCustomers()
    {
        var cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<Customer> customers = new List<Customer>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SELECT * FROM Customers", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            var dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                Customer customer = new Customer
                {
                    CustomerId = Convert.ToInt32(dr[0].ToString()),
                    Name = dr[1].ToString(),
                    Country = dr[2].ToString()
                };
                customers.Add(customer);
            }
        }
        var js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(customers));
    }

    public class Customer
    {
        public int CustomerId { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }
}

Screenshot