Answers

• chbocca Posts: 86Questions: 13Answers: 1

  March 2021

  BTW. If you do add the 500 buttons manually via buttons[{text: ... },{text: ...}, ...], no issue.
• colin Posts: 15,177Questions: 1Answers: 2,590

  March 2021

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  March 2021

  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 Posts: 86Questions: 13Answers: 1

  March 2021

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  March 2021 Answer ✓

  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 Posts: 86Questions: 13Answers: 1

  March 2021

  Yay!
• chbocca Posts: 86Questions: 13Answers: 1

  April 2021

  Hi Allan. Any progress on buttons.add()? c
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2021

  Hi,

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

  Allan
• chbocca Posts: 86Questions: 13Answers: 1

  April 2021

  Thank you, understand. Will keep checking in. c
• chbocca Posts: 86Questions: 13Answers: 1

  August 2021 edited August 2021

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  October 2021

  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 Posts: 86Questions: 13Answers: 1

  October 2021

  Beautiful!