Adding Lots of Buttons

chbocca

I prefer using the button.add() function to manually coding via buttons[{text: ... },{text: ...}, ...]. But, if I try adding too many buttons to a collection, everything hangs. Here is my demo.

Click the "Add 10 Buttons To Collection" and presto, 10 buttons added. Ditto for "Add 100." But, try "Add 500," and everything hangs.

Not sure I understand why. Is DataTables re-rendering with each add? Is there a way to suppress that? Or, is there a better approach to defining lots of custom buttons?

Thank you, as always, in advance.

Charles

chbocca

BTW. If you do add the 500 buttons manually via buttons[{text: ... },{text: ...}, ...], no issue.

colin

Thanks for the test case, as you say, everything looks as it should. I suspect you're in untrodden territory - I can't imagine many people adding more that a couple of dozen buttons, let alone in the 100s - so possibly some boundary issue causing problems. I've raised it internally (DD-1909 for my reference) and we'll report back here when there's an update.

Cheers,

Colin

allan

It does actually complete for me - although it takes 7.6 seconds which is an extraordinary long time for 500 buttons.

Upgrading to DataTables 1.10.24, Buttons 1.7.0 and jQuery 3.6.0 brings it down to 6.2 seconds.

I think it is taking so long because each button added is being inserted into the document in sequence, rather than all of them being lumped together which would be virtually instant I suspect.

How many buttons are you adding in the "real world"?

Allan

chbocca

Thank you both! It's a financial table of metrics comprising nearly 700 columns broken into 28 groups ... it's the main tool on the site. Nearly all the tools use DataTables at their core, but that main tool has grown over the years. (You provided support for the site early-on and it's been growing and hopefully improving ever since.) Anyway, I use Buttons to show/hide the 28 groups, and then within the groups use Buttons again to show/hide various metrics. So, there really are 700 columns! I currently build the buttons in the "manual mode," typing out the code on an Excel spreadsheet and pasting into Buttons (please forgive me). Using buttons.add() means I could do this with a for-loop and a string array. I tried inserting the html generated with javascript into Buttons [] via innerHTML, but it does not like. The only other way I could think is generate the whole var table = jQuery('#example').DataTable({}) function via javascript, then insert. But, add.button() feature where one could suppress individual insertion until the whole array is inserted would be best. (Like the "false" render option in table.columns(x_label).visible(false, false); ideally, something similar buttons.add(). Hope this helps. If you'd like to Zoom, I can walk you through or give you access. The site works just fine now, I just wanted to improve the way its coded. In any case, can't thank you enough for what you do. Charles

PS. Yep, if I wait long enough, I too can see the 500 buttons, but anything more than a couple seconds at this point in the process gets old.

allan

Hi Charles,

What I'll look at doing is adding the ability to pass in an array of buttons to buttons.add() which would then allow the DOM to be updated just once - hopefully (I can't remember exactly how that code works at the moment). I'll look into options for that.

Allan

chbocca

Yay!

chbocca

Hi Allan. Any progress on buttons.add()? c

allan

Hi,

Apologies no, I’ve been working on other aspects and not had a chance to do this yet.

Allan

chbocca

Thank you, understand. Will keep checking in. c

chbocca

Just quick follow-up ...

When working with large number of columns (several hundred), I'm finding it better to build a routine outside dt (say jQuery-ui Dialog Widget plus Javascript) to select desired columns or column groups and then reinitialize dt with updated header array.

Much faster than using buttons dt approach to hide or show large numbers of columns via:

table.columns().visible( false, false );
table.columns.adjust().draw( false );

Still think though it'd be good to have a buttons.add() feature in dt!

FYI only ... FWIW.

Thank you, as always.

c

allan

Hi,

Just to say that I've committed an update to Buttons to address this issue. I've done it by adding an optional third parameter to the button().add() method which lets you indicate if you want it to draw or not. So you would pass in false for all but the last loop - i.e. your demo code would become:

function add_buttons(bcnt) {
    var table = $('#example').DataTable();
    var btn = table.button();

    for (var ix=0; ix<bcnt; ix++) {
        btn.add(
            "0-" + ix,
            {
                text: "Button " + ix.toString(),
                action: function (e, dt, node, config) {
                    this.active(!this.active());
                    myAction(this.text());
                }
            },
            ix === bcnt-1
        );
    };
}

I thought allowing async functions, arrays or functions, but settled on this as probably the easiest to use API.

The nightly will rebuild with it soon. And it will be in Buttons 2.0.2 when we drop that.

Regards,
Allan

chbocca

Beautiful!