function format ( d ) {

    // `d` is the original data object for the row

  //console.log(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>';

}

​

// Global var to track shown child rows

var childRows = null;

​

$(document).ready(function() {

    var table = $('#example').DataTable( {

      ajax: "/ssp/ids-objects.php",

      order: [[1, 'asc']],

      columns: [

            {

                className:      'details-control',

                orderable:      false,

                data:           null,

                defaultContent: ''

            },

            { data: "first_name" },

            { data: "position" },

            { data: "office" },

            { data: "salary" }

        ],

    } );

​

    // Add event listener for opening and closing details

    $('#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

            d = row.data();

            row.child( format(d) ).show();

            tr.addClass('shown');

        }

    } );

​

  $('button').on('click', function () {

    // Get shown rows

    childRows = table.rows($('.shown')).ids().toArray();

    table.ajax.reload();

  });

​

  table.on('draw', function () {

    // If reloading table then show previously shown rows

    if (childRows) {

      for (var i=0; i< childRows.length; i++) {

        var row = table.row( '#' + childRows[i] );

        d = row.data();

        row.child($(format(d))).show();

        row.nodes().to$().addClass('shown');        

      }

      /*

      childRows.every(function ( rowIdx, tableLoop, rowLoop ) {

        d = this.data();

        this.child($(format(d))).show();

        this.nodes().to$().addClass('shown');

      } );

      */

      // Reset childRows so loop is not executed each draw

      childRows = null;

    }

  });

} );