title: Trying to show extra information in a responsive DataTable
body: <p>I just started using DataTables and I am trying to show extra information (retrieved through AJAX) within a Responsive DataTable.</p>
  
  <p>Extra information example - <a href="https://datatables.net/examples/server_side/row_details.html" rel="nofollow">Link 1</a></p>
  
  <p>Responsive table example - <a href="https://datatables.net/extensions/responsive/examples/initialisation/ajax.html" rel="nofollow">Link 2</a></p>
  
  <p>That means, on a big screen, the table will show some 'extra information' about each row on expanding.
  On a small screen, I want the table to show the extra information, as well as the rows hidden for responsive purpose.</p>
  
  <p>However, this is not happening.</p>
  
  <ul>
  <li>In large view, DataTable only shows the extra information on expanding a row. This is as expected.</li>
  <li>But on a smaller screen, it shows ONLY the rows which it hides and the extra information which was shown before, is completely gone.</li>
  </ul>
  
  <p>Is there any way where I can get the Hidden columns AND some Extra information to show when the row is expanded?</p>
  
  <p>I would really appreciate if someone could help me with this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function format ( d ) {
      
      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": "./data/arrays.txt",
          responsive: true,
          "columns": [
              {
                  "className":      'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": ''
              },
              { "data": "name" },
              { "data": "position" },
              { "data": "office" },
              { "data": "salary" }
          ],
          "order": [[1, 'asc']]
      } );
       
      $('#example tbody').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.row( tr );
   
          if ( row.child.isShown() ) {
              
              row.child.hide();
              tr.removeClass('shown');
          }
          else {
              
              row.child( format(row.data()) ).show();
              tr.addClass('shown');
          }
      } );
  } );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="example" cellspacing="0" class="display stripe compact row-border no-wrap" width="100%"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
     &lt;th&gt;Expand&lt;/th&gt;
           &lt;th&gt;Name&lt;/th&gt;
           &lt;th&gt;Position&lt;/th&gt;
           &lt;th&gt;Office&lt;/th&gt;
           &lt;th&gt;Salary&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>