Parent / child editing: dependent child table buttons

szakendre

Hello!
I made a parent / child solution based on this example:
https://editor.datatables.net/examples/advanced/parentChild.html

Are there any way to make the child table buttons dependent?
I mean hide the buttons until I select one row in parent table.

Thank You and best regards:
Endre, Szak

kthorngren

One option is to use buttons().container() chained with jQuery hide() and jQuery show() to hide/show the buttons container.

You can use the select event for the parent table. In the event check for selected rows. If none the use the above to hide or show if one or more rows are selected. See this example to learn how to check for selected rows.

Kevin

szakendre

Dear Kevin,
Thank you, it finally works.

new $.fn.dataTable.Buttons( table2, [
    { extend: "create", editor: editor2_1 },
    { extend: "edit",   editor: editor2_1 },
    { extend: "remove",   editor: editor2_1 },
] );

table1.on( 'select', function ()
{
    table2.buttons().container().show();
    table2.ajax.reload();
} );

table1.on( 'deselect', function ()
{
    table2.buttons().container().hide();
    table2.ajax.reload();
} );

table1.buttons().container().prependTo( $('div.fg-toolbar:eq(0)', table1.table().container() ) );
table2.buttons().container().prependTo( $('div.fg-toolbar:eq(0)', table2.table().container() ) );
table2.buttons().container().hide();