CODEWITHSUNDEEP
javascriptjquerydatatables
Adarsh Singh
Adarsh Singh

Reputation: 208

How to group buttons in datatables with export buttons?

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.

enter image description here

Upvotes: 1

Views: 2177

Answers (1)

Lucas
Lucas

Reputation: 301

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;
}

Upvotes: 2

Related Questions