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!

Suprabhat Biswal · Accepted Answer · 2017-02-09 08:23:25Z

6

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());
}

edited Feb 9, 2017 at 8:23

answered Feb 9, 2017 at 7:38

Suprabhat Biswal

3,2561 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Mihai Alexandru-Ionut Over a year ago

You can do this more easily using jquery.

Suprabhat Biswal Over a year ago

Thanks for replying and Yes, It can be done but here OP just want a solution to pass either employee id or row id. So, this is one the way to obtain it. Rest is upto OP to choose suitable answer.

SC.Cee Over a year ago

@SuprabhatBiswal Hey, thanks this worked perfectly. I'll accept this one as the answer as I tried the others and it didn't work for me. Thanks everyone else for contributing though. Appreciate it.

SC.Cee Over a year ago

@SuprabhatBiswal Out of curiosity how would I do this in jquery?

Mihai Alexandru-Ionut Over a year ago

@SC.Cee, please have a look at my answer.

|

Qh0stM4N · Accepted Answer · 2017-02-09 08:04:44Z

it's Possible i know three ways.

1 bad ways: go data for backEnd for example Disadvantages shorting and search... function disabled. extra response.

<a data-id="<?=yourQueryResult["id"]?>" onclick="javascript:foo()"></a>
function foo (){ var id = $(this)attr("data-id")}

or

<a onclick="javascript:foo(<?=yourQueryResult["id"]?>)"></a>
function foo(id){ /*deleting*/}

2 on render function go javascript method parameters row id example

render': function (data, type, row) {
                   return '<a onclick="javascript:foo('+ row.id +')"></a>'
               }

3 My favoritte direck jquery event listener to get row data Advantages: clean html, no inline function calling and all your function same file calling.

var table = $('#datatable').dataTable({...})

$('#datatable tbody').on('click', 'a.delete', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            var id = row.data().yourColumnName;
        });
$('#datatable tbody').on('click', 'a.edit', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                var rowData = row.data();
            });

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-09 08:17:10Z

3

You should use .attr() method in order to find out id attribute.

$('#datatable').on('click', 'button.deleteButton', function () {
        var id = $(this).attr('id');
});
$('#datatable').on('click', 'button.editButton', function () {
        var id = $(this).attr('id');
});

Datatable

 {
       'data': null,
        'render': function (data, type, row) {
               return '<button id="' + row.id +'" class="editButton">Edit</button>'
        }
 },
 {
       'data': null,
       'render': function (data, type, row) {
           return '<button id="' + row.id + '" class="deleteButton" >Delete</button>'
        }
}

edited Feb 9, 2017 at 8:17

answered Feb 9, 2017 at 7:29

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

4 Comments

SC.Cee Over a year ago

Hi, yeah I tried this way and when I did the alert it gave me undefined.

Mihai Alexandru-Ionut Over a year ago

Also, do you remove deleteClick() and editClick() ?

SC.Cee Over a year ago

Ah, no I didn't. You have to remove those? EDIT: removed the onclicks still doesn't work?

SC.Cee Over a year ago

Hmmm, it's still giving me undefined even now. Is another part of my code doing this? I'm just trying to alert to see what values I get and it's been giving me undefined even with this updated code.

Florim Maxhuni · Accepted Answer · 2017-02-09 07:33:00Z

0

You should add data-id to a button like this:

'<button data-id="' + row.id + '" id="' + row.id + '" class="dodo" onclick="deleteClick()">Delete</button>'

same for other button and then on click:

var id = $(this).data('id');

this will brings your Id

answered Feb 9, 2017 at 7:33

Florim Maxhuni

1,4211 gold badge17 silver badges35 bronze badges

Comments

Lalji Dhameliya · Accepted Answer · 2017-02-09 07:35:13Z

0

Just Get Row and its first parameter is your id and pass it into your deleteclick function

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

function deleteClick(var id)
{
      alert(id);  
}

answered Feb 9, 2017 at 7:35

Lalji Dhameliya

1,7791 gold badge19 silver badges27 bronze badges

Comments

Aditya Bhansali · Accepted Answer · 2023-09-07 11:04:37Z

 $(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 tbody').on('click', 'button', function () {
  var data = table.row($(this)).data();
  alert(id[0]);//0 is column number starting from 0.
});

This will work 100%

Your answer could be improved by providing an example of the solution and how it helps the OP.

Collectives™ on Stack Overflow

Jquery datatable get row id from button click

6 Answers 6

15 Comments

Comments

4 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

15 Comments

Comments

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related