Getting Id 'undefined' in Jquery Datatable in asp.net C#

Question

I am getting undefined message alert when I am trying to fetch the Id of the particular row by jquery datatable.

Here is my latest code,

<table id="gv_Datatable" class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Date</th>
            <th>Name</th>
            <th>Receipt</th>
            <th>Payment</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <th>Id</th>
            <th>Date</th>
            <th>Name</th>
            <th>Receipt</th>
            <th>Payment</th>
            <th>Description</th>
        </tr>
    </tfoot>
</table>
<!-- jQuery -->
<script src="Plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">  
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "FillGridMethod.asmx/GetCashBookList",
            dataType: "json",
            success: function (data) {
                var datatableVariable = $('#gv_Datatable').DataTable({
                    dom: 'Bfrtip',      
                    data: data,
                    columns: [
                        { 'data': 'Id', visible: false },
                        {
                            'data': 'cashbookdate', 'render': function (date) {
                                var date = new Date(parseInt(date.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        { 'data': 'cashbookaccname' },
                        { 'data': 'cashbookreceipt' },
                        { 'data': 'cashbookpayment' },
                        { 'data': 'cashbookdescription' },
                        {
                            "render": function (data, row) { return "<a href='#' id='" + row.Id +"' class='btn btn-success' onclick=DeleteCustomer(this); >Delete</a>"; }
                        }]
                });             
            }
        });

    }); 
    function DeleteCustomer(obj) {
        var rowID = $(obj).data("Id");
        alert(rowID);
    }
</script>  

Here is the GetCashBookList Method (which call from the ajax url)

[WebMethod]
public void GetCashBookList()
{
    var cashBook = new List<CashBookModel>();
    string constr = cn.ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        qryFillGrid = " select cashbookid, cashbookdate, cashbookaccname, cashbookreceipt, cashbookpayment, cashbookdescription from tbl_cashbook ";
        var cmd = new SqlCommand(qryFillGrid, con);
        con.Open();
        var dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            var cashBookModel = new CashBookModel
            {
                Id = Convert.ToInt32(dr[0]),
                cashbookdate = Convert.ToDateTime(dr[1]),
                cashbookaccname = dr[2].ToString(),
                cashbookreceipt = Convert.ToDecimal(dr[3]),
                cashbookpayment = Convert.ToDecimal(dr[4]),
                cashbookdescription = dr[5].ToString()
            };
            cashBook.Add(cashBookModel);
        }
    }
    var js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(cashBook));
}

Answer 1

First of all, the render function takes 3 parameters (data, type, row).
Then you only need to know the Id of the data you want to delete.

With these two points we can change the code of the render function to

"render": function (data, type, row) { return "<a href='#' class='btn btn-success' onclick=DeleteCustomer('" + row.Id + "');>Delete</>";}

and the DeleteCustomer function to:

function DeleteCustomer(id) {
  // Do your thing...
}

I've created a simple JSFiddle as demonstration.