Editing a child row cell and reloading data without refreshing.

Cevs

Each row of my table has a child row with cells that can be edited. My problem is that if I edit a value, then close the child rows and open them again, the changes do not appear until I refresh the page. I tried using ajax.reload() but it closes the child rows automatically and the user has to open it again.

Any ideas? Thanks in advance.

allan

It sounds like you need to rerender the child row with the new data. There isn't any automatic binding that will cause the child row to update when the data is changed, hence the need for this requirement to rerender the child row.

Allan

nigel pasco

Hi,

I have a similar set-up that is working fine. I use an on.submitSuccess event inside my nested table instance to open and close the child rows magically. They seem to re-render properly.

editor3
                    .on( 'submitSuccess', function ( e ) {
                        // On close, check if the values have changed and ask for closing confirmation if they have
                        row.child.hide();
                        tr.removeClass('shown');
                        row.child( $('<div>&nbsp;</div><div style="text-align: center; font-weight: bold;">PURCHASE ORDER DETAILS</div><table/><div></div>') ).show();
                        tr.addClass('shown');
                        row.child().find('table').DataTable(nestedtable);
                    } );

Cevs

Thanks to all for the support. I solved the problem by using ajax.reload() when the user closes the child row (as ajax.reload() closes the child rows anyways).
Here's my code if it is useful for anyone:

$( '#table' ).on( 'click' , '.details-control' , function () {
    var tr = $( this ).closest( 'tr' );
    var row = table.row( tr );

    if ( row.child.isShown() ) {
      table.ajax.reload();
      row.child.hide();
      tr.removeClass( 'shown' );
    }

    else
        row.child( childRows( row.data() ) ).show();
});