using a bootstrap dropdown button for the datatable.buttons

ollieb

Is it possible to add the datatable buttons( print, csv, copy etc) to a bootstrap dropdown button?

I have tried several ways and just can't seem to figure it out. Does anybody know of any example code implementing this which i could use and modify?

Thank you.

mortenf

Hi, You could add the button to the .dt-buttons class through jquery append or prepend funcitons. the following will add the button as the first in line (example from getbootstrap.com).

$('dt-tables).prepend('<div class="btn-group">\r\n <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r\n Action <span class="caret"></span>\r\n </button>\r\n <ul class="dropdown-menu">\r\n <li><a href="#">Action</a></li>\r\n <li><a href="#">Another action</a></li>\r\n <li><a href="#">Something else here</a></li>\r\n <li role="separator" class="divider"></li>\r\n <li><a href="#">Separated link</a></li>\r\n </ul>\r\n</div>')

allan

Use the collection button type to create a dropdown button. Example.

If you are using the Bootstrap integration for Buttons it will automatically show as a Bootstrap dropdown.

Allan

rezuba

@allan, using collection with the bootstrap integration the dropdown menu seems to have css bugs like positioning and cursor style on hover. Just to confirm that the problem is not on my end (as I have other customizations going on), is it the expected behavior that the .dropdown-menu is created on click and inserted as a direct child of the body together with a .dt-button-background? Or should it have the same markup as a native bootstrap dropdown?

allan

This example shows a collection button (last one) with Bootstrap styling and it appears to work okay. Can you link to a page showing the issue please?

Allan

rezuba

@allan thanks for the example. I could confirm that the behavior I referred to is the intended.

Since the solution differs from the native bootstrap behavior, it breaks my own css customizations. Creating a fiddle with all the customs involved would be a pain, but the styling part is easy to solve.

The thing is that I also need to adapt the jquery part. For instance, datatables creates a .dt-button-background that prevents clicks on other buttons while the dropdown is open. it's also too slow to fade in and out compared to the general feel of my app.

Is there any collection-specific event I can hook in to remove that animation and prevent the background creation?

allan

Since the solution differs from the native bootstrap behavior

In what way? I'd like my example to conform to Bootstrap standards if possible!

Allan

edit Sorry you did say that the background is a problem. You could use CSS to remove it. Just make it height and width 0.

rezuba

Hi @allan.

Yes, that or display:none will do for the background. What about the jquery animation? No event I could hook in or options to customize? I need to reuse or simulate my app's own css transitions for consistency.

allan

There is a fade configuration option for the collection button type which can be used to disable the jQuery animation, or to set a specific time for it (source code).

Allan