title: How to initialize a datatable with child rows with server side data?
body: <p>I am building an MVC application in which I am passing data into my view from the controller. </p>
  
  <p>I am also using the jQuery JavaScript library datatables in order to display my information. The problem that I am running into is I want to display my additional information properties (columns) in a hidden state using the <a href="https://datatables.net/examples/api/row_details.html" rel="nofollow noreferrer">child row</a> accordion feature. </p>
  
  <p>The problem is that every example is shown setting it up using ajax to pull in the data. </p>
  
  <p>For reference, I have pulled in the JavaScript code used. Obviously, I cannot use Razor (server-side) syntax within the JS script tag, but I need to know how to perform the same action as the "format" function being defined:</p>
  
  <pre><code>/* Formatting function for row details - modify as you need */
  function format ( d ) {
      // `d` is the original data object for the row
      return '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;'+
          '&lt;tr&gt;'+
              '&lt;td&gt;Full name:&lt;/td&gt;'+
              '&lt;td&gt;'+d.name+'&lt;/td&gt;'+
          '&lt;/tr&gt;'+
          '&lt;tr&gt;'+
              '&lt;td&gt;Extension number:&lt;/td&gt;'+
              '&lt;td&gt;'+d.extn+'&lt;/td&gt;'+
          '&lt;/tr&gt;'+
          '&lt;tr&gt;'+
              '&lt;td&gt;Extra info:&lt;/td&gt;'+
              '&lt;td&gt;And any further details here (images etc)...&lt;/td&gt;'+
          '&lt;/tr&gt;'+
      '&lt;/table&gt;';
  }
  
  $(document).ready(function() {
      var table = $('#example').DataTable( {
          "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']]
      } );
  
      // 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');
          }
      } );
  } );
  </code></pre>