How to group buttons in datatables with export buttons?

Question

I have a dropdown button with all export buttons coming inside its dropdown and outside I have two more buttons which are not grouping up with Export dropdown button.

buttons: [{
  extend: 'collection',
  text: 'Export',
  className: 'btn btn-sm btn-outline-dark',
  buttons: [{
    extend: 'excel',
    title: 'Re-assigned-Queries'
  }, {
    extend: 'pdf',
    title: 'Re-assigned-Queries'
  }, {
    extend: 'csv',
    title: 'Re-assigned-Queries'
  }]
}, {
  text: 'Select all',
  className: 'btn btn-sm btn-outline-blue',
  action: function() {
    reassignQueryTable.rows().select();
  }
}, {
  text: 'Select none',
  className: 'btn btn-sm btn-outline-red',
  action: function() {
    reassignQueryTable.rows().deselect();
  }
}],

Export button is coming separated from other two buttons and the other two buttons are coming as grouped. I want all the 3 buttons to be grouped in one.

Lucas · Accepted Answer · 2019-07-18 11:32:17Z

2

Add a class unique to the button

 extend: 'collection',
  text: 'Export',
  className: 'btn btn-sm btn-outline-dark no-round-right',
  buttons: [{
    extend: 'excel',
    title: 'Re-assigned-Queries'
  },

after that create a css for her

.no-round-right{
    border-radius: 50px 0px 0px 50px;
}

answered Jul 18, 2019 at 11:32

Lucas

3018 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adarsh Singh Over a year ago

Thank you so much Mr.Lucas. I thought of doing the same but I didn't.

Collectives™ on Stack Overflow

How to group buttons in datatables with export buttons?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related