title: Jquery Datatables Parent Child data
body: <p>I'm working with this <a href="https://datatables.net/examples/api/row_details.html" rel="nofollow noreferrer">Datatables Demo</a> to display child rows. And i'm using php to return an array or data. I have it functioning pretty well, but have a few issues.</p>
  
  <p>Here is an image of what I have currently.
  <img src="https://i.stack.imgur.com/suQN9.jpg" alt="enter image description here"></p>
  
  <p>As you see in the picture, there are two parent rows with the same question, and the child rows with different answers.</p>
  
  <p><strong>1. I need a way to limit one parent row for each distinct question.</strong></p>
  
  <p><strong>2. I also need a way to loop through and display multiple child rows in the same child table.</strong> </p>
  
  <p><strong>3. Another option is how to assign data to the parent rows and another set of data to the child rows.</strong></p>
  
  <p>I know I should do that in my query, but the question column is single to many results, in two separate tables. The only way to do it with queries would be to return one result for the questions and then make another ajax call to fill the child rows. I was assuming this would be easier.</p>
  
  <p>CODE:</p>
  
  <p><strong>Table:</strong> </p>
  
  <pre><code>&lt;table id="car" class="display" cellspacing="0" width="100%"&gt;
        &lt;thead&gt;
           &lt;tr&gt;
             &lt;th class="details-control" style="max-width: 80px;"&gt;Expand&lt;/th&gt;
             &lt;th&gt;Question&lt;/th&gt;
           &lt;/tr&gt;
         &lt;/thead&gt;
         &lt;tbody&gt;
         &lt;/tbody&gt;
          &lt;tfoot&gt;
             &lt;tr&gt;
               &lt;th&gt;&lt;/th&gt;
               &lt;th&gt;Question&lt;/th&gt;
             &lt;/tr&gt;
           &lt;/tfoot&gt;
         &lt;/table&gt;
  </code></pre>
  
  <p><strong>Script:</strong></p>
  
  <pre><code> function format(d) {
          //d is the original data object for the row
          var tbl = '&lt;table cellpadding="5" cellspacing="0" border="0" style="margin-left:110px; width:100%; font-size:12px;"&gt;' +
                '&lt;tr&gt;' +
                '&lt;th style="width:60%; color:3383bb;"&gt;Answer Choices&lt;/th&gt;' +
                '&lt;th style="width:15%; color:3383bb;"&gt;# of Answers&lt;/th&gt;' +
                '&lt;th style="width:15%; color:3383bb;"&gt;Percentage&lt;/th&gt;' +
                '&lt;/tr&gt;' + '&lt;tr&gt;' +
                '&lt;td&gt;' + d.Answer + '&lt;/td&gt;' +
                '&lt;td&gt;' + d.NumberOfAnswers + '&lt;/td&gt;' +
                '&lt;td&gt;' + d.Percent + '&lt;/td&gt;' +
                '&lt;/tr&gt;' + '&lt;/table&gt;';
          return tbl;
      }
  
  
      var table2 = $('#car').DataTable({
          "ajax": "/rmsicorp/clientsite/reset/survey/surveyajax.php",
          "scrollY": "400px",
          "paging": false,
          "bAutoWidth": true,
          "columns": [
              {
                  "className": 'details-control',
                  "orderable": false,
                  "data": null,
                  "defaultContent": ''
              },
              { "data": "Question" },
          ],
      }).columns.adjust().draw();
  </code></pre>
  
  <p><strong>Query result:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/A43mF.jpg" alt="enter image description here"></p>
  
  <p>The question column is just repeating for each answer. The rest of the columns are distinct.</p>