Answers

• colin Posts: 15,154Questions: 1Answers: 2,587

  October 2018

  Hi @hackeresq ,

  Would something like this work? It came from this thread here and seems to do what you're after.

  Cheers,

  Colin
• hackeresq Posts: 6Questions: 1Answers: 0

  October 2018

  Not exactly what I was looking for. But it got me thinking!

  I can wrap the .dropdown-toggle elements in a .btn-group after the table has initialized.

  I added this to the table options:

  initComplete: function ( settings ) {
     $('.buttons-collection.dropdown-toggle').wrap('<div class="btn-group"></div>');
  }
  

  Totally worked.

  It just feels like a dirty fix though. I'd prefer this to be native functionality. Is there any way to add that functionality to the DataTables Bootstrap 4 integration (dataTables.bootstrap4.min.js)?
• allan Posts: 61,771Questions: 1Answers: 10,112 Site admin

  October 2018

  Interesting. What class have you given to your buttons? The demo here doesn't have that issue, but it doesn't use the same styling as your picture above.

  Allan
• hackeresq Posts: 6Questions: 1Answers: 0

  October 2018

  Hi @allan, I can confirm the demo you sent does have the same issue. To reproduce the issue, try adding another button that uses .dropdown-toggle (for example I have colvis and pageLength). In other words it's a latent issue that looks fine with one dropdown, but it becomes obvious with two.

  To answer your question though, I am using .btn-outline-secondary as my button class. Here's my button definitions:

  buttons: [
      {
          extend:    'copyHtml5',
          text:      '<i class="fas fa-copy"></i>',
          titleAttr: 'Copy to Clipboard',
          className: 'btn-outline-secondary'
      },
      {
          extend:    'excel',
          text:      '<i class="fas fa-file-download"></i>',
          titleAttr: 'Download to Excel',
          className: 'btn-outline-secondary'
      },
      {
          extend:    'print',
          text:      '<i class="fas fa-print"></i>',
          titleAttr: 'Print',
          className: 'btn-outline-secondary'
      },
      {
          extend:    'colvis',
          text:      '<i class="fas fa-columns"></i>',
          titleAttr: 'Visible Columns',
          columns:   ':not(.noVis)',
          className: 'btn-outline-secondary'
      },
      {
          extend:    'pageLength',
          text:      '<i class="fas fa-th-list"></i>',
          titleAttr: 'Number of Rows',
          className: 'btn-outline-secondary'
      },
  ],
  

  To be clear, the BS4 docs require a .btn-group wrapper for each .dropdown-toggle. Here's a comparison demo.

  That all being said, my workaround is functional. But I think that this should definitely be default functionality.
• allan Posts: 61,771Questions: 1Answers: 10,112 Site admin

  October 2018 Answer ✓

  Yup - I'm with you now. Thanks for letting me know about this!

  I agree - this is something that Buttons should do itself. I don't currently have a hook that the Bootstrap 4 integration can use to do this, so I've added it to my bug tracker for the next Buttons release (unfortunately I did a Buttons release last night).

  Allan
• hackeresq Posts: 6Questions: 1Answers: 0

  October 2018

  Great! Thanks @allan! You've done great work with Datatables. I'll keep an eye out for the next release.
• hackeresq Posts: 6Questions: 1Answers: 0

  October 2018

  Just wanted to provide an update:

  My workaround had a bug where it would misbehave on pages with multiple tables. That is, the jQuery selector was generic and would wrap button group classes around all of the dropdown buttons n-number of times based on the number of tables on the page. So I ended up with dropdowns wrapped inside of 10 btn-group classes.

  My solution was to use a specific selector as shown below:

  initComplete: function ( settings ) {
        $("#" + settings.sInstance + '_wrapper .buttons-collection.dropdown-toggle').wrap('<div class="btn-group"></div>');
  }
  

  Problem solved. Now it only wraps the btn-group class on the buttons within that instance of datatables avoiding the n-plus problem. Just wanted to share.
• allan Posts: 61,771Questions: 1Answers: 10,112 Site admin

  March 2019

  This has finally been fixed in the source and will be part of the next release .

  Allan