Button-expand all child rows

ostmal

Good morning!
Please tell me if there is a solution to this question: to open all child rows on the page using the button?
Thank you for your help!

rf1234

If you are using the responsive extension then this reusable button called "showAllChildRows" will do the job:

//custom button to show all child rows (responsive extension)
$.fn.dataTable.ext.buttons.showAllChildRows = {
    text: 'Show all child rows',
    action: function ( e, dt, button, config ) {
        dt.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
    }
};

You'll find more here:
https://www.gyrocode.com/articles/jquery-datatables-how-to-expand-collapse-all-child-rows/

ostmal

Thank you for your help!!

rf1234

You are welcome. I need this myself as well so I played around with it a little. I need more of a toggle button to show and hide child rows of selected rows. I found that with many rows this can be a bit slow - my computer isn't very fast either. And my clients have slow computers, too.

So this is the modified button with a spinner and making sure the spinner isn't sort of blocked initially (timeout 50ms).

//custom button to show all child rows of the rows selected (responsive extension)
$.fn.dataTable.ext.buttons.showHideAllChildRowsSelected = {
    extend: 'selected',
    text: showHideAllChildRowsSelectedLabel,
    action: function ( e, dt, button, config ) {
        $.busyLoadFull("show", { 
            fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw"
        });
        setTimeout(function() {
            var sel = dt.rows( { selected: true } ).nodes().to$();
            sel.find('td:first-child').trigger('click').promise().done(
                function(){
                    $.busyLoadFull("hide", { 
                      // options here 
                    });
                } )
        }, 50);
    }
};