disable/enable new button based on selected row (parent/child sollution)

nessinits

Hi there,

I'm trying to initially disable the new button of my child datatable when there is no row selected in my parent datatable.

Does anyone have an example how to do this?

Kind regards,
nessinits

rf1234

Here is something similar with two custom buttons. You would need to initially hide the button in order to remove the hidden class when a row is seleced. Hide it again when it is deselected.

I hide and unhide the buttons; I don't disable them but this should also work if you only want the buttons to be disabled and enabled.
https://datatables.net/reference/api/buttons().disable()

//custom button added with language specific label
$.fn.dataTable.ext.buttons.goToProposal = {
    text: goToProposalLabel,
    className: 'btn-showall-color hidden',
    name: "goToProposalButton",
    action: function ( e, dt, button, config ) {
        //set a cookie for one minute to save row data
        setCookieRowContent(dt, 'rfp');
        execRedirect('?page=proposalCred');
    }
};

//custom button added with language specific label
$.fn.dataTable.ext.buttons.goToContract = {
    text: goToContractLabel,
    className: 'hidden',
    name: "goToContractButton",
    action: function ( e, dt, button, config ) {
        setCookieRowContent(dt, 'rfp');
        execRedirect('?page=contractCred');
    }
};

parentTable
        .on ( 'select', function () {                
            var selected = parentTable.row( {selected: true} );
            if (selected.any()) {
                childTable.buttons('goToContractButton:name').nodes().removeClass('hidden');
                childTable.buttons('goToProposalButton:name').nodes().removeClass('hidden');
   }
});

parentTable
        .on( 'deselect', function () {                
            childTable.buttons('goToContractButton:name').nodes().addClass('hidden');
            childTable.buttons('goToProposalButton:name').nodes().addClass('hidden');
});