title: Datatables child row with PHP data from Codeigniter
body: <p>I have a datatable that is displaying 6 total columns of data from my database. The 7th column is a "+" button that expands down and displays a further 7 pieces of data about that specific entry. I am also using Codeigniter for my framework. Originally I was using colspan to make the row hidden and squeeze down, and found out that was a no-no, so I looked into Datatables child rows here: <a href="https://datatables.net/examples/api/row_details.html" rel="nofollow">https://datatables.net/examples/api/row_details.html</a> but it appears that the data needs to be there after the generation of the table.</p>
  
  <p>I have the HTML/PHP to generate the table and populate it with data now. The data is sent from my model to controller and to this view:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-bordered table-hover" id="dataTables-listlg"&gt;
          &lt;thead&gt;
              &lt;th&gt;ItemID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Identified?&lt;/th&gt;
              &lt;th&gt;Item Type&lt;/th&gt;
              &lt;th&gt;Unique ID&lt;/th&gt;
              &lt;th&gt;Details&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;?php foreach ($storage_items as $storageItem) { ?&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['nameid']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['name']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['amount']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['identify']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $item_types[$storageItem['type']]; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['unique_id']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;center&gt;&lt;a data-toggle="collapse" data-parent="#accordion" href="#storagedetails&lt;?php echo $storageItem['id']; ?&gt;"&gt;&lt;button type="button" class="btn btn-primary btn-circle btn-sm"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
                      &lt;td&gt;
                      &lt;?php   echo form_open('/account/edititem', array('class' =&gt; 'form-inline'), array('id' =&gt; $storageItem['id'], 'item_loc' =&gt; "inventory", 'acctid' =&gt; $acct_data-&gt;account_id)); ?&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="8" class="hiddenRow"&gt;
                          &lt;div id="storagedetails&lt;?php echo $storageItem['id']; ?&gt;" class="panel-collapse collapse"&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-xs-2"&gt;
                                          &lt;strong&gt;Refine level:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="refine" class="form-control" value="&lt;?php echo $storageItem['refine']; ?&gt;" &lt;?php if ($storageItem['type'] != 4 &amp;&amp; $storageItem['type'] != 5) { echo "readonly"; } ?&gt; /&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-xs-2"&gt;
                                          &lt;strong&gt;Broken?:&lt;/strong&gt;&amp;nbsp;&lt;input type="checkbox" name="attribute" class="form-control" value="1" &lt;?php if ($storageItem['attribute'] == 1) { echo "checked"; } if ($storageItem['type'] != 4 &amp;&amp; $storageItem['type'] != 5) { echo "disabled"; } ?&gt; /&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-xs-2"&gt;
                                          &lt;strong&gt;Bound?:&lt;/strong&gt;&amp;nbsp;&lt;input type="checkbox" name="bound" class="form-control" value="1" &lt;?php if ($storageItem['bound'] == 1) { echo "checked"; } ?&gt; /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;br /&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-xs-2"&gt;
                                          &lt;strong&gt;Card 1:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card0" class="form-control" value="&lt;?php echo $storageItem['card0']; ?&gt;" &lt;?php if ($storageItem['type'] != 4 &amp;&amp; $storageItem['type'] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-xs-2"&gt;
                                          &lt;strong&gt;Card 2:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card1" class="form-control" value="&lt;?php echo $storageItem['card1']; ?&gt;" &lt;?php if ($storageItem['type'] != 4 &amp;&amp; $storageItem['type'] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-xs-2"&gt;
                                          &lt;strong&gt;Card 3:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card2" class="form-control" value="&lt;?php echo $storageItem['card2']; ?&gt;" &lt;?php if ($storageItem['type'] != 4 &amp;&amp; $storageItem['type'] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-xs-2"&gt;
                                          &lt;strong&gt;Card 4:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card3" class="form-control" value="&lt;?php echo $storageItem['card3']; ?&gt;" &lt;?php if ($storageItem['type'] != 4 &amp;&amp; $storageItem['type'] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;?php echo form_close(); ?&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;?php } ?&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The javascript I'm using now to make the table is:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $('#dataTables-listlg').DataTable({
          "responsive": true,
          "lengthMenu": [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
          "searching": false,
          "defaultContent": "",
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Where the <code>&lt;td colspan="8" class="hiddenRow"&gt;</code> is, is where I want to make the child row drop down (UNDER the entry showing the additional information). I've seen the example but I have no idea how to get my data into the proper format to put it into the datatable and where it should go. Here is the controller with the relevant part:</p>
  
  <pre><code>$data['storage_items'] = $this-&gt;accountmodel-&gt;get_storage_items($aid);
  $this-&gt;load-&gt;view('account/details',$data);
  $this-&gt;load-&gt;view('footer'); // Where the javascript is above
  </code></pre>
  
  <p>And the model: </p>
  
  <pre><code>function get_storage_items($aid) {
      $this-&gt;db-&gt;select('*');
      $this-&gt;db-&gt;from('storage')-&gt;order_by('storage.id', 'asc');
      $this-&gt;db-&gt;where('storage.account_id', $aid); // This is just sorting out the results from that specific account
      $q = $this-&gt;db-&gt;get();
      return $q-&gt;result_array();
  }
  </code></pre>
  
  <p>It looks like I need to get my array of results from my model into json/ajax but have no idea how I'd get this all the way to my footer AFTER the table is generated. Any help you can provide would be appreciated.</p>
  
  <p>---Edit---
  After looking over the answer below and mulling over thoughts, I have changed things to the following. Here is the complete view from foreach loop to the end, including the Javascript to put stuff in the 'content' array:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-bordered table-hover display" id="dataTables-listlg"&gt;
          &lt;thead&gt;
              &lt;th&gt;ItemID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Identified?&lt;/th&gt;
              &lt;th&gt;Item Type&lt;/th&gt;
              &lt;th&gt;Unique ID&lt;/th&gt;
              &lt;th&gt;Details&lt;/th&gt;
              &lt;th&gt;Options&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;?php foreach ($storage_items as $storageItem) { ?&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['nameid']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['name']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['amount']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['identify']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $item_types[$storageItem['type']]; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $storageItem['unique_id']; ?&gt;&lt;/td&gt;
                      &lt;td class="details-control"&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;button type="submit" class="btn btn-success btn-sm &lt;?php if ($check_perm['editstorageitem'] == 0) { echo "disabled"; } ?&gt;" &gt;Edit&lt;/button&gt;&amp;nbsp;
                          &lt;button type="button" class="btn btn-danger btn-sm &lt;?php if ($check_perm['editstorageitem'] == 0) { echo "disabled"; } ?&gt;"&gt;Delete&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;script&gt;
                      var content = [];
                      content[&lt;?php echo $storageItem["id"]; ?&gt;] = '"'&lt;?php echo form_open("/account/edititem", array("class" =&gt; "form-inline"), array("id" =&gt; $storageItem["id"], "item_loc" =&gt; "inventory", "acctid" =&gt; $acct_data-&gt;account_id)); ?&gt; \
                              &lt;div class="panel-body"&gt; \
                                  &lt;div class="row"&gt; \
                                      &lt;div class="col-xs-2"&gt; \
                                          &lt;strong&gt;Refine level:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="refine" class="form-control" value="&lt;?php echo $storageItem["refine"]; ?&gt;" &lt;?php if ($storageItem["type"] != 4 &amp;&amp; $storageItem["type"] != 5) { echo "readonly"; } ?&gt; /&gt; \
                                      &lt;/div&gt; \
                                      &lt;div class="col-xs-2"&gt; \
                                          &lt;strong&gt;Broken?:&lt;/strong&gt;&amp;nbsp;&lt;input type="checkbox" name="attribute" class="form-control" value="1" &lt;?php if ($storageItem["attribute"] == 1) { echo "checked"; } if ($storageItem["type"] != 4 &amp;&amp; $storageItem["type"] != 5) { echo "disabled"; } ?&gt; /&gt; \
                                      &lt;/div&gt; \
                                      &lt;div class="col-xs-2"&gt; \
                                          &lt;strong&gt;Bound?:&lt;/strong&gt;&amp;nbsp;&lt;input type="checkbox" name="bound" class="form-control" value="1" &lt;?php if ($storageItem["bound"] == 1) { echo "checked"; } ?&gt; /&gt; \
                                      &lt;/div&gt; \
                                  &lt;/div&gt; \
                                  &lt;br /&gt; \
                                  &lt;div class="row"&gt; \
                                      &lt;div class="col-xs-2"&gt; \
                                          &lt;strong&gt;Card 1:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card0" class="form-control" value="&lt;?php echo $storageItem["card0"]; ?&gt;" &lt;?php if ($storageItem["type"] != 4 &amp;&amp; $storageItem["type"] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt; \
                                      &lt;/div&gt; \
                                      &lt;div class="col-xs-2"&gt; \
                                          &lt;strong&gt;Card 2:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card1" class="form-control" value="&lt;?php echo $storageItem["card1"]; ?&gt;" &lt;?php if ($storageItem["type"] != 4 &amp;&amp; $storageItem["type"] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt; \
                                      &lt;/div&gt; \
                                      &lt;div class="col-xs-2"&gt; \
                                          &lt;strong&gt;Card 3:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card2" class="form-control" value="&lt;?php echo $storageItem["card2"]; ?&gt;" &lt;?php if ($storageItem["type"] != 4 &amp;&amp; $storageItem["type"] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt; \
                                      &lt;/div&gt; \
                                      &lt;div class="col-xs-2"&gt; \
                                          '&lt;strong&gt;Card 4:&lt;/strong&gt;&amp;nbsp;&lt;input type="number" name="card3" class="form-control" value="&lt;?php echo $storageItem["card3"]; ?&gt;" &lt;?php if ($storageItem["type"] != 4 &amp;&amp; $storageItem["type"] != 5) { echo "readonly"; } ?&gt; /&gt;&lt;/br&gt; \
                                      &lt;/div&gt; \
                                  &lt;/div&gt; \
                              &lt;?php echo form_close(); ?&gt; \
                          &lt;/div&gt;'"';
                  &lt;/script&gt;
                  &lt;tr item_id="&lt;?php echo $storageItem['id']; ?&gt;"&gt;
                  &lt;/tr&gt;
              &lt;?php } ?&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my javascript in the footer looks like this now:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      var table = $('#dataTables-listlg').DataTable({
          "responsive": true,
          "lengthMenu": [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
          "searching": false,
          "defaultContent": "",
      });
  
  // Add event listener for opening and closing details
      $('#dataTables-listlg 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(content[tr.attr('item_id')]).show();
              tr.addClass('shown');
          }
      });
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>In fact, the 'unique_id' in this table is not as "unique" as I thought (I didn't design it, just writing the backend for it). There is however a unique key on the table 'id', so that's what I'm using to make sure I get the right value.</p>
  
  <p>This however is not working. I am getting an error in the console:</p>
  
  <p><code>SyntaxError: missing ; before statement</code> - appears on the line that starts <code>content[&lt;?php echo $storageItem["id"]; ?&gt;] =...</code> in each iteration of the foreach</p>
  
  <p>I'm also getting the error from the webpage warning about DataTables: <code>DataTables warning: table id=dataTables-listlg - Requested unknown parameter '0' for row 1. For more information about this error, please see http://datatables.net/tn/4</code></p>
  
  <p>Additionally, the child row doesn't drop down. Did I misunderstand or make a silly mistake?</p>