title: Datatables (Row Details): Uncaught TypeError: Cannot read property 'style' of undefined
body: <p>im trying to implement the datatables row details</p>
  
  <p>this is my table that has an id of "user_datas"</p>
  
  <pre><code>&lt;table id="user_datas" class="table table-bordered table-striped" width="100%"&gt;
       &lt;thead&gt;
         &lt;tr&gt;
           &lt;th&gt;NAME&lt;/th&gt;
           &lt;th&gt;SEX&lt;/th&gt;
           &lt;th&gt;BIRTHDATE&lt;/th&gt;
           &lt;th&gt;AGE&lt;/th&gt;
         &lt;/tr&gt;
       &lt;/thead&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>this is the code that comes from the datatable documentation which im trying to implement</p>
  
  <pre><code>function format ( d ) {
      return 'Name: '+d.name+'&lt;br&gt;'+
     'Gender: '+d.sex+'&lt;br&gt;'+
          'The child row can contain any data you wish, including links, images, inner tables etc.';
  }
  
  $(document).ready(function() {
      var dataTable = $('#user_datas').DataTable({
        "processing":true,
        "serverSide":true,
        "order":[],
        "ajax":{
          url:"../controller/fetch_senior_citizen.php",
          type:"POST"
        },
  
        "columns": [
            {
              "class":          "details-control",
              "orderable":      false,
              "data":           null,
              "defaultContent": ""
            },
            { "data": "name" },
            { "data": "sex" },
            { "data": "birthdate" },
            { "data": "age" }
        ],
          "order": [[1, 'asc']]
      });
  
       // Array to track the ids of the details displayed rows
      var detailRows = [];
  
      $('#user_datas tbody').on( 'click', 'tr td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dataTable.row( tr );
          var idx = $.inArray( tr.attr('id'), detailRows );
  
          if ( row.child.isShown() ) {
              tr.removeClass( 'details' );
              row.child.hide();
  
              // Remove from the 'open' array
              detailRows.splice( idx, 1 );
          }
          else {
              tr.addClass( 'details' );
              row.child( format( row.data() ) ).show();
  
              // Add to the 'open' array
              if ( idx === -1 ) {
                  detailRows.push( tr.attr('id') );
              }
          }
      } );
  
      // On each draw, loop over the `detailRows` array and show any child rows
      dataTable.on( 'draw', function () {
          $.each( detailRows, function ( i, id ) {
              $('#'+id+' td.details-control').trigger( 'click' );
          } );
      } );                    
  });
  </code></pre>
  
  <p>and this is some of my code from fetch_senior_citizen.php</p>
  
  <pre><code>foreach($result as $row)
  {
      $name = clean($row["f_name"])." ".clean($row["m_name"])." ".clean($row["l_name"]);
      $sub_array = array();
      $sub_array["id"] = $row['id'];
      $sub_array["name"] = $name;
      $sub_array["sex"] = strtoupper($row["sex"]);
      $sub_array["birthdate"] = $row["birthdate"];
      $sub_array["age"] = $row["age"];
      $data[] = $sub_array;
  }
  
  $output = array(
      "draw"              =&gt;  intval($_POST["draw"]),
      "recordsTotal"      =&gt;  $filtered_rowsz,
      "recordsFiltered"   =&gt;  get_total_all_records4(),
      "data"              =&gt;  $data
  );
  echo json_encode($output, JSON_PRETTY_PRINT);
  </code></pre>
  
  <p>the error that im currently facing is <strong>Uncaught TypeError: Cannot read property 'style' of undefined</strong> but if i remove this code</p>
  
  <pre><code>{
      "class": "details-control",
      "orderable": false,
      "data": null,
      "defaultContent": ""
  }
  </code></pre>
  
  <p>Everythings work fine. But my table doesnt have row details</p>