 <p>I used <a href="http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part" rel="nofollow noreferrer">this</a> reference to implement DataTables with row details in MVC 4 using the Razor engine (I initially wanted to pass JSON, but found another approach that provides the functionality that I was looking for and felt along the lines of what I usually do in MVC).</p> <p>I assume that DataTables is already implemented, a means for data retrieval is implemented, and MVC 4 with the Razor engine is being used. I will only be focusing on how to implement DataTables with row details in MVC. </p> <hr> <p>My models:</p> <pre><code>public class Advisor { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Discipline { get; set; } } public class Student { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Major { get; set; } public int AdvisorId { get; set; } } </code></pre> <p>Given my models, I have a view that displays a table of advisors:</p> <pre><code>@model IEnumerable&lt;DataTablesMvcExample.Models.Advisor&gt; @{ ViewBag.Title = "Index"; //eg, [url]/Advisor Layout = "~/Views/Shared/_Layout.cshtml"; //will explain later } &lt;table id="sort"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;Discipline&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; @foreach (var item in Model) { &lt;tr&gt; &lt;td&gt;@item.FirstName&lt;/td&gt; &lt;td&gt;@item.LastName&lt;/td&gt; &lt;td&gt;@item.Discipline&lt;/td&gt; &lt;/tr&gt; } &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>I would like to display the students each advisor advises. To do this:</p> <p>1) In my controller, with respect to the view in which the table above lies, I add the code below:</p> <pre><code>public ActionResult AdvisorStudents(int advisorId) { var advisorStudents = //retrieve students based on their advisor return View(advisorStudents); } </code></pre> <p>2) I create a view called AdvisorStudents.cshtml (eg, [url]/Advisor/AdvisorStudents)</p> <pre><code>@model IEnumerable&lt;DataTablesMvcExample.Models.Student&gt; @{ Layout = null; //Using a layout will cause this table to not open as row details. I was at a loss until I explicitly defined this. } &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;Major&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; @foreach (var item in Model) { &lt;tr&gt; &lt;td&gt;@item.FirstName&lt;/td&gt; &lt;td&gt;@item.LastName&lt;/td&gt; &lt;td&gt;@item.Major&lt;/td&gt; &lt;/tr&gt; } &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>3) In the view the table of advisors lie, I add the JavaScript below, DISCLAIMER: I borrowed a lot of this from the aforementioned reference.</p> <pre><code>&lt;script type="text/javascript"&gt; var oTable; $(document).ready(function () { $('#sort tbody td img').click(function () { var nTr = this.parentNode.parentNode; /* close image is displayed while viewing row details*/ if (this.src.match('close')) { //ie, match "~/[directory]/*close*.png" /* close this row as it is open */ this.src = //path of open image oTable.fnClose(nTr); } /* open image is displayed to view row details */ else { /* open this row */ this.src = //path of close image var advisorId = $(this).attr("rel"); $.get("Advisor/AdvisorStudents?AdvisorId=" + advisorId, function (students) { oTable.fnOpen(nTr, students, 'row_details'); }); } }); /* Initialize datatable and make column that opens/closes non-sortable*/ oTable = $('#sort').dataTable({ "bJQueryUI": true, "aoColumns": [ { "bSortable": false, "bSearchable": false }, null, null, null ] }); }); &lt;/script&gt; </code></pre> <p>When I initialize the DataTables for the table of advisors above, I specify four columns, with the first column not sortable or searchable. The table of advisors specified three columns above. The column not specified, which will become my first column, is where my open/close display will go. I add a header cell <code>&lt;th&gt;&lt;/th&gt;</code> and a standard cell <code>&lt;td&gt;&lt;img src=//path of open image alt="expand/collapse" rel="@item.Id"/&gt;&lt;/td&gt;</code> as the first column to achieve this.</p> <p>NOTE: You can have the open/close display in any column you'd like. To do so:</p> <p><strong>Javascript</strong></p> <ul> <li>Change <code>td</code> in <code>$('#sort tbody td img')</code> to <code>td:nth-child(x)</code> or <code>td:last-child</code>.</li> <li>Have the not sortable/searchable declaration match which column you wish to have your open/close display on</li> </ul> <p><strong>HTML</strong></p> <ul> <li>Have the <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code> cells match which column you wish to have your open/close display on</li> </ul> <p><img src="https://i.stack.imgur.com/oOo21.png" alt="DataTables with row details in MVC 4"></p> <p>Hope this helps someone. <strike>I have a <a href="http://sscce.org/" rel="nofollow noreferrer">SSCCE</a> by request.</strike> I know this is a necrobump, but I couldn't find a suitable example (aside from the one I reference above) to suit my needs. This question asks for an example, here is mine.</p>