Hi malar,
Refer below example.
Model
public class Project
{
public string ErrorMessage { get; set; }
public string ActivityCode { get; set; }
public string Originatorname { get; set; }
public string MASTERACTIVITY { get; set; }
public string AAFDESCRIPTION { get; set; }
public string RATIONALE { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<Project> projects = new List<Project>();
projects.Add(new Project
{
AAFDESCRIPTION = "AAFDESCRIPTION 1",
ActivityCode = "ActivityCode 1",
ErrorMessage = "ErrorMessage 1",
MASTERACTIVITY = "MASTERACTIVITY 1",
Originatorname = "Originatorname 1",
RATIONALE = "RATIONALE 1"
});
projects.Add(new Project
{
AAFDESCRIPTION = "AAFDESCRIPTION 2",
ActivityCode = "ActivityCode 2",
ErrorMessage = "ErrorMessage 2",
MASTERACTIVITY = "MASTERACTIVITY 2",
Originatorname = "Originatorname 2",
RATIONALE = "RATIONALE 2"
});
projects.Add(new Project
{
AAFDESCRIPTION = "AAFDESCRIPTION 3",
ActivityCode = "ActivityCode 3",
ErrorMessage = "ErrorMessage 3",
MASTERACTIVITY = "MASTERACTIVITY 3",
Originatorname = "Originatorname 3",
RATIONALE = "RATIONALE 3"
});
ViewBag.ProjectList = projects;
return View();
}
}
View
@model Hidden_DataTable_MVC.Models.Project
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
.hide_column {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
$('#tblDetails').dataTable();
$("#tblDetails tbody tr").on("click", function (e) {
var arr = $('#tblDetails').dataTable().fnGetData($(this));
var AAFDesc = (arr[5]).replace(/<\/?span[^>]*>/g, "");
alert(AAFDesc);
});
});
</script>
</head>
<body>
<table id="tblDetails" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>ErrorMessage</th>
<th>ActivityCode</th>
<th>Originator</th>
<th class="hide_column">Master Activity</th>
<th class="hide_column">AAF Description</th>
<th class="hide_column">Rationale</th>
</thead>
<tbody>
@if (ViewBag.ProjectList != null)
{
foreach (var item in ViewBag.ProjectList)
{
<tr>
<td class="noExl">
<button type="button" class="btn btn-warning">EDIT</button>
</td>
<td>@item.ErrorMessage</td>
<td>@item.ActivityCode</td>
<td><span>@item.Originatorname</span></td>
<td class="hide_column"><span>@item.MASTERACTIVITY</span></td>
<td class="hide_column"><span>@item.AAFDESCRIPTION</span></td>
<td class="hide_column"><span>@item.RATIONALE</span></td>
</tr>
}
}
</tbody>
</table>
</body>
</html>
Screenshot
