Jquery datatable get row id from button click

Question

I have two buttons rendered on each row in my datatable, Edit and Delete. Is it possible to grab the employee's ID or the Row's ID on the Delete or Edit button click and have it passed that id value into a webmethod I have that takes in an ID parameter to delete a record off the database?

My jquery code so far:

 $(document).ready(function () {
        $.support.cors = true;
        $.ajax({
            url: '<%=ResolveUrl("GetEmployee.aspx") %>',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
              var table = $('#datatable').dataTable({
                    data: data,
                    columns: [
                        { 'data': 'Id' },
                        { 'data': 'image' },
                        { 'data': 'lastName' },
                        { 'data': 'firstName' },
                        { 'data': 'jobTitle' },
                        {
                            'data': 'StartDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': 'EndDate',
                            'render': function (jsonDate) {
                                var date = new Date(parseInt(jsonDate.substr(6)));
                                var month = date.getMonth() + 1;
                                return date.getDate() + "/" + month + "/" + date.getFullYear();
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id +'" onclick="editClick()">Edit</button>'
                            }
                        },
                        {
                            'data': null,
                            'render': function (data, type, row) {
                                return '<button id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'
                            }
                        }
                    ]
                });
            }
        });

        $('#datatable').on('click', 'button', function () {
            var id = $(this).data();
            //var id = table.row($(this)).data();
            alert(JSON.stringify(id));
        });
    });

Right now its returning my an undefined when I try to grab the id.

My webmethod:

  [WebMethod]
    public static void DeleteRecord(string id)
    {
        var query = "DELETE FROM employee WHERE ID=?";
        OdbcConnection myConn = new OdbcConnection(myConnection);
        OdbcTransaction transaction = null;
        myConn.Open();

        transaction = myConn.BeginTransaction();
        OdbcCommand command = new OdbcCommand(query, myConn, transaction);
        command.Parameters.Add("ID", OdbcType.Int).Value = id;
        command.ExecuteNonQuery();

        transaction.Commit();

        myConn.Close();
    }

Thanks!

Answer 1

Yes, you can get both employee's ID or the row's ID upon button click. For this you need to perform some minor changes when defining edit and delete button.

{
     'data': null,
     'render': function (data, type, row) {
                   return '<button id="' + row.id +'" onclick="editClick(this)">Edit</button>'
               }
},
{
     'data': null,
     'render': function (data, type, row) {
                       return '<button id="' + row.id + '" class="dodo" onclick="deleteClick(this)">Delete</button>'
               }
}

Javascript / jQuery

function editClick (obj) {
      var rowID = $(obj).attr('id');
      var employeeID = $(obj).closest('tr').find('td:first').html());
}

function deleteClick (obj) {
      var rowID = $(obj).attr('id');
      var employeeID = $(obj).closest('tr').find('td:first').html());
}