Hi Rockstar8,
Refer below sample.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class CustomerModel
{
public string ContactName { get; set; }
public string City { get; set; }
public List<Order> Orders { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
using (NorthwindEntities entites = new NorthwindEntities())
{
List<CustomerModel> model = new List<CustomerModel>();
foreach (Customer customer in entites.Customers)
{
model.Add(new CustomerModel
{
ContactName = customer.ContactName,
City = customer.City,
Orders = entites.Orders.Where(o => o.CustomerID == customer.CustomerID).Take(3).ToList()
});
}
return View(model);
}
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<CustomerModel>>" %>
<%@ Import Namespace="Nested_Table_jQuery_DataTable_MVC.Models" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
</head>
<body>
<table id="example" cellpadding="0" cellspacing="0" class="Grid">
<thead>
<tr>
<th></th>
<th>Contact Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<% foreach (CustomerModel customer in Model)
{ %>
<tr>
<td>
<img src="Images/plus.png" />
<div style="display: none">
<table cellpadding="0" cellspacing="0" class="ChildGrid">
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
</tr>
</thead>
<tbody>
<%foreach (Order order in customer.Orders)
{%>
<tr>
<td><%:order.OrderID%></td>
<td><%:order.OrderDate.Value.ToShortDateString()%></td>
</tr>
<%}%>
</tbody>
</table>
</div>
</td>
<td><%:customer.ContactName %></td>
<td><%:customer.City %></td>
</tr>
<% } %>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<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 type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
<script type="text/javascript">
//Assign Click event to Plus Image.
$("body").on("click", "img[src*='plus.png']", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "/Images/minus.png");
});
//Assign Click event to Minus Image.
$("body").on("click", "img[src*='minus.png']", function () {
$(this).attr("src", "Images/plus.png");
$(this).closest("tr").next().remove();
});
$(function () {
$('#example').DataTable({
"order": [[1, "asc"]],
"pageLength": 5,
initComplete: function () {
this.api().columns([2]).every(function () {
var column = this;
var select = $('<br/><select><option value="">Show All</option></select>')
.appendTo($(column.footer())).on('change', function () {
var val = $(this).val();
if (val === "Empty") {
column.search('^$', true, false).draw();
} else {
column.search(val != '' ? '^' + val + '$' : '', true, false).draw();
}
});
column.data().unique().sort().each(function (d, j) {
if (d === '') {
d = 'Empty';
}
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
});
</script>
</body>
</html>
Screenshot
