Trying to show extra information in a responsive DataTable

Question

I just started using DataTables and I am trying to show extra information (retrieved through AJAX) within a Responsive DataTable.

Extra information example - Link 1

Responsive table example - Link 2

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.

However, this is not happening.

In large view, DataTable only shows the extra information on expanding a row. This is as expected.
But on a smaller screen, it shows ONLY the rows which it hides and the extra information which was shown before, is completely gone.

Is there any way where I can get the Hidden columns AND some Extra information to show when the row is expanded?

I would really appreciate if someone could help me with this.

function format ( d ) {
    
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

$(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');
        }
    } );
} );

<table id="example" cellspacing="0" class="display stripe compact row-border no-wrap" width="100%">
 <thead>
  <tr>
   <th>Expand</th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Salary</th>
  </tr>
 </thead>
</table>

score 5 · Accepted Answer · answered Apr 14 '16 at 11:14

You can use custom child row renderer with Responsive extension to produce custom content for your rows.

var table = $('#example').DataTable({
    "responsive": {
        "details": {
            "renderer": function ( api, rowIdx, columns ) {
                // Show hidden columns in row details
                var data = $.map( columns, function ( col, i ) {
                    return col.hidden 
                       ? '<tr><td>'+col.title+':</td> '+
                         '<td>'+col.data+'</td></tr>' 
                       : '';
                 } ).join('');

                // Extra: Show "Name" in row details
                data += '<tr><td>Name:</td><td>' + api.cell(rowIdx, 0).data() + '</td></tr>';
                // Generate a table
                data = $('<table width="100%"/>').append( data ).prop('outerHTML');

                // Extra: Show custom content
                data += '<div class="content-custom">Custom content</div>';

                return data;
            }
        }
    }
});

See this jsFiddle for code and demonstration.

Thank you, that definitely is one of the things I need. However, in the fiddle, can I get the row to expand and show 'custom-content' even when all the columns (till column 'Extra 10') are visible? — Rahul Mk, Apr 20 '16 at 06:33
@RahulMk, That's a good question. See https://jsfiddle.net/3fLwej4u/1/, there could be extra blank column with special class `none`. I'm not sure yet whether this is the most effective way. — Gyrocode.com, Apr 20 '16 at 10:57
Brilliant!! This is exactly what I need. I see your solutions on many posts; I somehow knew I'd get mine from Gyrocode. Really apreciate your help. Thank you! — Rahul Mk, Apr 21 '16 at 05:27

Trying to show extra information in a responsive DataTable

1 Answers1

Linked