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!
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!
Share Improve this question edited Feb 9, 2017 at 8:43 Qh0stM4N 1921 silver badge9 bronze badges asked Feb 9, 2017 at 7:25 SC.CeeSC.Cee 2371 gold badge4 silver badges14 bronze badges6 Answers
Reset to default 6Yes, 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());
}
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();
});
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>'
}
}
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
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);
}
$(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%