$(document).ready(function() {

function format ( d ) {

  return $('<tr>'+

            '<td><input type="button" class="submit" value="submit"/></td>'+

            '<td><input type="text" name="name" value="'+d.name+'"</input></td>'+

            '<td>'+d.position+'</td>'+

            '<td>'+d.office+'</td>'+

            '<td>'+d.extn+'</td>'+

            '<td>'+d.start_date+'</td>'+

            '<td>'+d.salary+'</td>'+

        '</tr>').toArray();

}

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

        "ajax": "/ajax/objects.txt",

        "columns": [

            {

                "orderable":      false,

                "data":           null,

                "defaultContent": '<input type="button" class="edit" value="edit"/>'

            },

            { "data": "name" },

            { "data": "position" },

            { "data": "office" },

            { "data": "extn" },

            { "data": "start_date" },

            { "data": "salary" }

        ]

    } );

     $('#example tbody').on('click', 'td input.edit', 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');

        }

    } );

     $('#example tbody').on('click', 'td input.submit', function () {

       // Get child row

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

       // Find parent row

       var parent_tr = $(tr).prev();

       var parent_row = table.row( parent_tr );

       var data = parent_row.data();

       // Hide child details

       parent_row.child.hide();

       parent_tr.removeClass('shown');

       // Update parent row

       data.name = $('input[name="name"]', tr).val();

       parent_row.data( data ).draw();

    } );

} );