If I understand your requirement right, what you need is to fetch the 'ID' and 'EmployeeName' by clicking the button in the same row.
Since you set the 'ID' to invisible, you can not directly fetch it through DOM (use jquery or javascript). However, the values of 'ID' and 'EmployeeName' can be brought by
using the given API of DataTables 'row().data()', which will return an object containing all of the data in this row. The row is fetched by adding the button into the function of the click event "ShowDeleteModalPopup".
More details, please refer to below code:
Script:
<script type="text/javascript">
$(document).ready(function () {
GetClockList();
});
function GetClockList() {
try {
var table = $('#tblData').DataTable();
table.destroy();
}
catch (ex) {
}
var table = $('#tblData').DataTable({
// simulation of the data, not important
"ajax": {
"url": "DataTableJquery.aspx/GetClockList",
"type": "POST",
"contentType": "application/json;charset=utf-8",
"datatype": "json",
"dataSrc": function (json) {
return JSON.parse(json.d);
}
},
"columns": [
{ "data": 'ID', "width": "6%" },
{ "data": 'EmployeeName', "width": "20%" },
{ "data": 'ClockedDatetoList', "width": "20%" },
{
"data": null,
"render": function (data, type, row) {
return `<div class="text-center">
<a class='btn btn-danger text-white' style='cursor:pointer; width:100px;' onclick="ShowDeleteModalPopup(this)" >
<i class='far fa-trash-alt'></i> Delete
</a></div>
`;
}, "width": "5%"
}
],
"columnDefs": [
{
"targets": [0],
"visible": false
},
],
"language": {
"emptyTable": "no data found."
},
"width": "100%"
});
}
function ShowDeleteModalPopup(input) {
// get the row
var row = input.parentNode.parentNode.parentNode;
// Use row().data() API to fetch the data of the row
var table = $('#tblData').DataTable();
var rowData = table.row(row).data();
// Get the ID and EmplyeeName
var ID = rowData.ID;
var EmployeeName = rowData.EmployeeName;
alert(ID);
alert(EmployeeName);
}
</script>
Code behind: Simulation of the data, not important.
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetClockList()
{
List<Clock> clocks = new List<Clock>();
clocks.Add(new Clock() { ID = "1", EmployeeName = "name1", ClockedDatetoList = new DateTime(2020, 3, 1) });
clocks.Add(new Clock() { ID = "2", EmployeeName = "name2", ClockedDatetoList = new DateTime(2020, 3, 2) });
clocks.Add(new Clock() { ID = "3", EmployeeName = "name3", ClockedDatetoList = new DateTime(2020, 3, 3) });
clocks.Add(new Clock() { ID = "4", EmployeeName = "name4", ClockedDatetoList = new DateTime(2020, 3, 4) });
clocks.Add(new Clock() { ID = "5", EmployeeName = "name5", ClockedDatetoList = new DateTime(2020, 3, 5) });
string s = JsonConvert.SerializeObject(clocks);
return s;
}
public class Clock
{
public string ID { get; set; }
public string EmployeeName { get; set; }
public DateTime ClockedDatetoList { get; set; }
}
Demo:
Hope this can help you.
Best regards,
Sean
ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
Member
415 Points
1343 Posts
JQuery DataTables - Not Displaying Data from Button Clicked event to the javascript function Pl...
Mar 02, 2020 07:03 AM|polachan|LINK
I have the given
<div class="table-responsive"> <table id="tblData" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Id</th> <th>EmployeeName</th> <th>Date</th> <th></th> </tr> </thead> </table> </div>JS
<script type="text/javascript"> $(document).ready(function () { GetClockList() }); </script> function GetClockList() { try { var table = $('#tblData').DataTable(); table.destroy(); } catch (ex) { } var table= $('#tblData').DataTable({ "ajax": { "url": "/Home/GetClockList?employeeid=" + $('#dropdownEmployee').val() + "&clockdate=" + $('#txtAttendanceDate').val() , "type": "GET", "datatype": "json", "dataSrc": function (json) { return JSON.parse(json); } }, "columns": [ { "data": 'ID', "width": "6%" }, { "data": 'EmployeeName', "width": "20%" }, { "data": 'ClockedDatetoList', "width": "20%" }, { "data": null, "render": function (data, type, row) { return `<div class="text-center"> <a class='btn btn-danger text-white' style='cursor:pointer; width:100px;' onclick="ShowDeleteModalPopup()" > <i class='far fa-trash-alt'></i> Delete </a></div> `; }, "width": "5%" } ], "columnDefs": [ { "targets": [0], "visible": false }, ], "language": { "emptyTable": "no data found." }, "width": "100%" }); } function ShowDeleteModalPopup() { alert(ID); How can I bring the value from ID column and EmployeeName column when we click btn btn-danger Please help alert(EmployeeName) $('#lblID').val(id); $('#deleteConfirmationModal').modal('show'); }html page
Contributor
3050 Points
901 Posts
Re: JQuery DataTables - Not Displaying Data from Button Clicked event to the javascript function...
Mar 03, 2020 03:10 AM|Sean Fang|LINK
Hi, polachan，
If I understand your requirement right, what you need is to fetch the 'ID' and 'EmployeeName' by clicking the button in the same row.
Since you set the 'ID' to invisible, you can not directly fetch it through DOM (use jquery or javascript). However, the values of 'ID' and 'EmployeeName' can be brought by using the given API of DataTables 'row().data()', which will return an object containing all of the data in this row. The row is fetched by adding the button into the function of the click event "ShowDeleteModalPopup".
More details, please refer to below code:
Script:
<script type="text/javascript"> $(document).ready(function () { GetClockList(); }); function GetClockList() { try { var table = $('#tblData').DataTable(); table.destroy(); } catch (ex) { } var table = $('#tblData').DataTable({ // simulation of the data, not important "ajax": { "url": "DataTableJquery.aspx/GetClockList", "type": "POST", "contentType": "application/json;charset=utf-8", "datatype": "json", "dataSrc": function (json) { return JSON.parse(json.d); } }, "columns": [ { "data": 'ID', "width": "6%" }, { "data": 'EmployeeName', "width": "20%" }, { "data": 'ClockedDatetoList', "width": "20%" }, { "data": null, "render": function (data, type, row) { return `<div class="text-center"> <a class='btn btn-danger text-white' style='cursor:pointer; width:100px;' onclick="ShowDeleteModalPopup(this)" > <i class='far fa-trash-alt'></i> Delete </a></div> `; }, "width": "5%" } ], "columnDefs": [ { "targets": [0], "visible": false }, ], "language": { "emptyTable": "no data found." }, "width": "100%" }); } function ShowDeleteModalPopup(input) { // get the row var row = input.parentNode.parentNode.parentNode; // Use row().data() API to fetch the data of the row var table = $('#tblData').DataTable(); var rowData = table.row(row).data(); // Get the ID and EmplyeeName var ID = rowData.ID; var EmployeeName = rowData.EmployeeName; alert(ID); alert(EmployeeName); } </script>HTML:
<div class="table-responsive"> <table id="tblData" class="table table-striped table-bordered" style="width: 100%"> <thead> <tr> <th>Id</th> <th>EmployeeName</th> <th>Date</th> <th></th> </tr> </thead> </table> </div>Code behind: Simulation of the data, not important.
protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static string GetClockList() { List<Clock> clocks = new List<Clock>(); clocks.Add(new Clock() { ID = "1", EmployeeName = "name1", ClockedDatetoList = new DateTime(2020, 3, 1) }); clocks.Add(new Clock() { ID = "2", EmployeeName = "name2", ClockedDatetoList = new DateTime(2020, 3, 2) }); clocks.Add(new Clock() { ID = "3", EmployeeName = "name3", ClockedDatetoList = new DateTime(2020, 3, 3) }); clocks.Add(new Clock() { ID = "4", EmployeeName = "name4", ClockedDatetoList = new DateTime(2020, 3, 4) }); clocks.Add(new Clock() { ID = "5", EmployeeName = "name5", ClockedDatetoList = new DateTime(2020, 3, 5) }); string s = JsonConvert.SerializeObject(clocks); return s; } public class Clock { public string ID { get; set; } public string EmployeeName { get; set; } public DateTime ClockedDatetoList { get; set; } }Demo:
Hope this can help you.
Best regards,
Sean