title: How do I incorporate Razor for an MVC Model into a DataTables method -- Child rows (show extra/detailed information)?
body: <p>I have a site made using MVC. It has a table built using DataTables. However, there are too many columns and it looks really messy and squished together. So I decided to decrease the number of columns by utilizing the <a href="https://datatables.net/examples/api/row_details.html" rel="nofollow noreferrer">DataTables Child rows (show extra/detailed information) feature</a>.</p>
  
  <p>Here's what my code looks like now:</p>
  
  <pre><code>@using MyWebSite
  @model IEnumerable&lt;TableModel&gt;
  
  
  &lt;!--DATATABLE--&gt;  
  @section scripts{
      &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          //create table
          var table = $('#example').DataTable({
  
              //child row code -- show and hide extra row details
              //this is the default code from the data tables site. need to change. I'm not using ajax -- objects.txt -- i'm using a model
              "ajax": "../ajax/data/objects.txt", 
              "columns": [
                  {
                      "className":      'details-control',
                      "orderable":      false,
                      "data":           null,
                      "defaultContent": ''
                  },
  
  
                  { "data": "name" },
                  { "data": "position" },
                  { "data": "office" },
                  { "data": "salary" }
              ],
              "order": [[1, 'asc']],
  
              dom: 'Bfrtip',
              select: true,
  
              //Get Site Selected Data button
              buttons: [
              {
                  text: 'Get selected site info',
                  action: function (e) {
                      e.preventDefault();
  
                      var data1 = $.map(table.rows(['.selected']).data(), function (item) {
                          return item[1]
                      });
  
                      var postData = { hosts: data1 }
  
                      // Submit form data via Ajax
                      $.ajax({
                          type: "POST",
                          url: '/Site/PrepWebsiteSelections',
                          data: postData,
                          dataType: "text",
                          success: function (response) {
                              alert(response);
                          },
                          error: function (xhr) {
                              alert("Error " + xhr);
                          }
  
                      });
                  }
              }]
  
          });
  
          // Add event listener for opening and closing details
          $('#example tbody').on('click', 'td.details-control', function () {
              var tr = $(this).closest('tr');
              var row = table.row( tr );
  
              if ( row.child.isShown() ) {
                  // This row is already open - close it
                  row.child.hide();
                  tr.removeClass('shown');
              }
              else {
                  // Open this row
                  row.child( format(row.data()) ).show();
                  tr.addClass('shown');
              }
  
          });
      });
  
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
      $(function () {
          var status = $.connection.webSiteHub;
          status.client.updateSiteStatus = function (site, message) {
              var table = $('#example').DataTable();
  
              var indexes = table.rows().eq(0).filter(function (rowIdx) {
                  return table.cell(rowIdx, 1).data() === host ? true : false;
              });
  
              table.rows(indexes).every(function (rowIdx, tableLoop, rowLoop) {
                  var d = this.data();
                  d[8] = message;
                  //table.fnUpdate(message, this, undefined, false);
                  $('#example').dataTable().fnUpdate(d,table.row(this).index(),undefined,false);
              });
          };
  
          $.connection.hub.start()
      });
  
  &lt;/script&gt;
  
  
  &lt;form name="frm-example" id="frm-example"&gt;
      &lt;table class="display" id="example"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Apple)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Orange)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Banana)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Avocado)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Peach)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Strawberry)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Plum)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Grape)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Tomato)
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              @{
                  var models = Model.ToList();
                  for (var i = 0; i &lt; models.Count; i++)
                  {
                      &lt;tr&gt;
                          &lt;td&gt;
                              @Html.CheckBoxFor(modelItem =&gt; models[i].Apple)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Orange)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Banana)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Avocado)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Peach)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Strawberry)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Plum)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Grape)
                          &lt;/td&gt;
                          &lt;td&gt;
                              @Html.DisplayFor(modelItem =&gt; models[i].Tomato)
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  }
              }
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As you can see, I have copy and pasted the jquery <a href="https://datatables.net/examples/api/row_details.html" rel="nofollow noreferrer">code from the DataTables site</a> without really changing anything. I hit a wall because I wasn't sure how to take my current table with Razor code and alter it to accommodate the hidden child rows. I wanted to maintain the setup I have. Mostly to avoid having a lot of different coding styles and languages all jumbled up.</p>
  
  <p>This is my first ever project using MVC, so I'm sorry if this question seems a bit trivial. </p>