Hi ruben00000,
When Anchor Link is clicked, first reference the row and find the DataTable row using it.
Then from the DataTable row get the hidden column using the property.
Refer below example.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployeeList()
{
NorthwindEntities entities = new NorthwindEntities();
var data = entities.Employees.Select(x => new EmployeeDetail()
{
EmployeeId = x.EmployeeID,
FirstName = x.FirstName,
LastName = x.LastName
}).AsQueryable();
int totalRecord = 0;
int filterRecord = 0;
var draw = 10;
int pageSize = 10;
int skip = 0;
totalRecord = data.Count();
filterRecord = data.Count();
var empList = data.OrderBy(x => x.EmployeeId).Skip(skip).Take(pageSize).ToList();
var returnObj = new
{
draw = draw,
recordsTotal = totalRecord,
recordsFiltered = filterRecord,
data = empList
};
return Json(returnObj, JsonRequestBehavior.AllowGet);
}
public class EmployeeDetail
{
public int EmployeeId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="//github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.5.0/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" />
<script src="//cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="employeesTable" class="display nowrap">
<thead>
<tr>
<th hidden>Employee Id</th>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var oTable = $("#employeesTable").DataTable({
"processing": true,
"serverSide": true,
"filter": false,
"ajax": {
"url": "/Home/GetEmployeeList",
"type": "POST",
"datatype": "json"
},
"columns": [
{ data: "EmployeeId", name: "EmployeeId", width: "60px", className: "dt-center", visible: false },
{ data: "FirstName", name: "FirstName", width: "80px", autoWidth: true, className: "dt-center" },
{ data: "LastName", name: "LastName", width: "80px", autoWidth: true, className: "dt-center" },
{
data: "EmployeeId",
orderable: false,
render: function (data) {
return '<a class="popupEdit" href="/Employees/_EditForm/' + data + '"><i class="fa fa-pencil"/></a>';
}
}
]
});
$('.container').on('click', 'a.popupEdit', 'tr', function (e) {
e.preventDefault();
data = oTable.row($(this).parents('tr')).data();
var id = data.EmployeeId;
alert(id);
});
});
</script>
</body>
</html>
Screenshot
