Grab row id from defaultContent edit/delete buttons and pass it to a webmethod.
Grab row id from defaultContent edit/delete buttons and pass it to a webmethod.
scee
Posts: 1Questions: 1Answers: 0
Hi,
I'm pretty new with jquery datatables, I have created 2 buttons, Edit and Delete for each row of my employee data table. Is it possible so that when i click on the edit/delete button it will grab that rows employee's ID and pass that information through an ajax call to one of my webmethods delete function to delete or edit an employee off the database?
My code:
`<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employee.aspx.cs" Inherits="Login.Employee" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.support.cors = true;
$.ajax({
url: '<%=ResolveUrl("GetEmployee.aspx") %>',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
$('#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,
'defaultContent': '<button id="editBtn" onclick="editClick()">Edit</button>'
},
{
'data': null,
'defaultContent': '<button id="deleteBtn" onclick="deleteClick()">Delete</button>'
}
]
});
}
});
});
function deleteClick() {
// code to call webmethod delete function to delete a record off the database and datatable. Webmethod takes in an Id
parameter.
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="border:1px solid black; padding:3px; width:1200px; margin:auto">
<table id="datatable">
<thead>
<tr>
<th>ID</th>
<th>Picture</th>
<th>Last Name</th>
<th>First Name</th>
<th>Job Position</th>
<th>Start Date</th>
<th>End Date</th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
<div>
</div>
</form>
</body>
</html>`
This discussion has been closed.