How to show specific child rows on load without click

Question

I am using the following function to control the display of the child rows when an icon is clicked on the appropriate row.

How to show specific child rows on load without click?

$('#example 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( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

Answer 1

SOLUTION

Replace anonymous function with named function for click event handler, for example onRowDetailsClick as shown below.

function onRowDetailsClick(table){
   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( format(row.data()) ).show();
      tr.addClass('shown');
   }
}

// ... skipped ...

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function (){
    onRowDetailsClick.call(this, table);
});

Then you need to use initComplete option to call onRowDetailsClick on specific rows as shown below:

'initComplete': function(settings){
   var api = new $.fn.dataTable.Api(settings);

   // Open 12th row, zero-based index
   api.$('tr').
      .eq(11)
      .find('td.details-control')
      .each(function(){
         onRowDetailsClick.call(this, api);
      });

/*
   // Open rows with class .open
   api.$('tr.open').
      .find('td.details-control')
      .each(function(){
         onRowDetailsClick.call(this, api);
      });
*/

}

DEMO

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">'+
        '<tr>'+
            '<td>Salary:</td>'+
            '<td>'+d[5]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Start date:</td>'+
            '<td>'+d[4]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

function onRowDetailsClick(table){
   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( format(row.data()) ).show();
      tr.addClass('shown');
   }
}

$(document).ready(function() {
  
    var table = $('#example').DataTable( {
        'ajax': 'https://api.myjson.com/bins/qgcu',
        'columns': [
            {
                'className':      'details-control',
                'orderable':      false,
                'data':           null,
                'defaultContent': ''
            },
            { 'data': 0 },
            { 'data': 1 },
            { 'data': 2 },
            { 'data': 3 }
        ],
        'order': [[1, 'asc']],
        'initComplete': function(settings){
           var api = new $.fn.dataTable.Api(settings);
          
           // Open 12th row, zero-based index
           api.$('tr')
              .eq(11)
              .find('td.details-control')
              .each(function(){
                 onRowDetailsClick.call(this, api);
              });
        }
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function (){
       onRowDetailsClick.call(this, table);
    });
} );

td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

<table id="example" class="stripe row-border order-column compact">
<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Ext</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Ext</th>
    </tr>
</tfoot>
</table>

Answer 2

You would do it just after the DataTable init call. For example:

$(function(){    
    var table = $('#example').DataTable({
        // ToDo: Your DataTable options HERE
    })

    var openDetailRow = function(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( format(row.data()) ).show();
            tr.addClass('shown');
        }
    };

    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        openDetailRow( tr );
    });

    // Just a guess on which would be the first to show.
    // Replace with whichever one should be shown.
    var initialRowToShowDetails = $('#example tbody tr').first();
    openDetailRow(initialRowToShowDetails);
});

You could even do it before binding the event, but I tend to bind events as early as I can.