title: How to create jQuery datatable with multiple child rows(nested table)?
body: <p><strong>Question:</strong>
        I need to create a table with a nested table format. When a user clicks plus button it should show the nested table. If they click minus button it should hide. </p>
  
  <p>I have done jquery datatable its working fine. but I'm not able to display multiple rows for child table. I have tried so many times I'm not able to display proper format.</p>
  
  <p>This is the link I have referred to create a table
  <a href="https://datatables.net/examples/api/row_details.html" rel="nofollow noreferrer">https://datatables.net/examples/api/row_details.html</a></p>
  
  <p><strong>Database:</strong>
  Actual data coming from the database as per the below format and I have converted JSON format to display :
  <a href="https://i.stack.imgur.com/teItL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/teItL.png" alt="enter image description here"></a></p>
  
  <p><strong>C# Code</strong>: </p>
  
  <pre><code> return new JsonResult { Data = new { data = test }, JsonRequestBehavior = 
  JsonRequestBehavior.AllowGet };
  </code></pre>
  
  <p>I need an output like this with a nested table:
  <a href="https://i.stack.imgur.com/PtBwV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PtBwV.png" alt="enter image description here"></a></p>
  
  <p><strong>UI CODE:</strong></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;City Name&lt;/td&gt;' +
              '&lt;td&gt;Permission&lt;/td&gt;' +
          '&lt;/tr&gt;&lt;tr&gt;' +
              '&lt;td&gt;' + d.City+ '&lt;/td&gt;' +
              '&lt;td&gt;' + d.Permission+ '&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": "UserName" },
          { "data": "Email" },
          { "data": "UserId" },
  
      ],
      "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>
  
  <p><strong>JSON FORMAT:</strong></p>
  
  <pre><code>{"data":[
  {"UserId":"ABC","UserName":"Peter","Email":"abc@gmail.com.com","CityName":"Chennai","Permission":"Manager,LocalUser"},
  {"UserId":"ABC","UserName":"Peter","Email":"abc@gmail.com.com","CityName":"Bangalore","Permission":"Admin,LocalUser"},
  {"UserId":"xyz","UserName":"Haiyan","Email":"abc2@gmail.com.com","CityName":"Bangalore","Permission":"LocalUser"},
  {"UserId":"xyz","UserName":"Haiyan","Email":"abc2@gmail.com.com","CityName":"Chennai","Permission":"LocalUser,Manager"}]}
  </code></pre>
  
  <p>Technology used: ASP.Net MVC5</p>
  
  <p>Any other way I'm ready to use either linq or modify JSON data format. </p>