var childEditors = {};  // Globally track created chid editors

$(document).ready(function() {

  var arr = new Array(3);

  arr[0] = ["name", "position", "extension"];

  arr[1] = new Array(3);

  arr[1][1] = ["name1"];

  arr[1][2] = ["position1"];

  arr[1][3] = ["extn1"];

  arr[2] = new Array(3);

  arr[2][1] = ["name2"];

  arr[2][2] = ["position2"];

  arr[2][3] = ["extn2"];

  arr[3] = new Array(3);

  arr[3][1] = ["name3"];

  arr[3][2] = ["position3"];

  arr[3][3] = ["extn3"];

  arr[4] = new Array(3);

  arr[4][1] = ["name4"];

  arr[4][2] = ["position4"];

  arr[4][3] = ["extn4"];

  var data = [

        {

          "name":     "Nicolas Zim",

          "position": "System Architect",

          "office":   "5421",

          "salary":   "$3,120"

        },

        {

          "name":     "Alisson Costa",

          "position": "Seller",

          "office":   "8422",

          "salary":   "$5,300"

        }

    ];

    var object2 = [

    {"Alisson Costa":

        [

          {

            name: arr[1][1],

            position: arr[1][2],

            extn: arr[1][3]

          },

          {

            name: arr[2][1],

            position: arr[2][2],

            extn: arr[2][3]

          }

        ]

    },

    {"Nicolas Zim":

        [

          {

            name: arr[3][1],

            position: arr[3][2],

            extn: arr[3][3]

          },

          {

            name: arr[4][1],

            position: arr[4][2],

            extn: arr[4][3]

          }

        ]

    },

    ];

​

  // Return table with id generated from row's name field

  function format(rowData) {

    return '<table id="' + rowData.name.replace(' ', '-') + '" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+

           '</table>';  

    }

​

​

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

    data: data,

    columns: [

      {

         className: 'details-control',

         orderable: false,

         data: null,

         defaultContent: ''

      },

        { data: 'name' },

        { data: 'position' },

        { data: 'salary' },

        { data: 'office' }

    ],

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

​

} );

  // Add event listener for opening and closing first level childdetails

  $('#example tbody').on('click', 'td.details-control', function () {

     var tr = $(this).closest('tr');

     var row = table.row( tr );

     var rowData = row.data();

     if ( row.child.isShown() ) {

       // This row is already open - close it

       row.child.hide();

       tr.removeClass('shown');

       // Destroy the Child Datatable

       $('#' + rowData.name.replace(' ', '-')).DataTable().destroy();

     }

     else {

       // Open this row

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

       var id = rowData.name.replace(' ', '-');

       var unique = rowData.name;  // Get the unique key

       $('#' + id).DataTable({

          dom: "t",

          data: object2[unique],  // Get the specific data for the row

          columns: [

            { data: "name", title: 'Name' },

            { data: "position", title: 'Position' },

            { data: "extn", title: 'Extension' },

          ],

          scrollY: '100px',

          select: true,

        });

        tr.addClass('shown');

      }

  } );

​

} );