Trying to show extra information in a responsive DataTable
<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>