We help IT Professionals succeed at work.
Get Started

How to customize DataTable custom button collection menu?

Starr Duskk
Starr Duskk asked
on
150 Views
Last Modified: 2020-01-07
I am using the custom buttons for the dataTable located here: https://datatables.net/reference/button/collection

I am using two of the collection buttons, but I need the menus to be a different size. I am having trouble adding in css code that customizes the dropdown menus for the button collections. Here is the code here for the dataTable.
var selectedExcelButtonText = "Excel";
  $('#TableTeamGrid').DataTable( {
buttons: [{ extend: 'collection', text: selectedButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataSortBy' }, buttons: [{ text: 'Alphabetical A to Z', action: function(e, dt, node, config) { dt.order( [2, 'asc'] ).draw(); selectedButtonText = "Alphabetical A to Z "; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>');}}, { text: 'Alphabetical Z to A', action: function(e, dt, node, config) { dt.order( [2, 'desc'] ).draw(); selectedButtonText = "Alphabetical Z to A"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Newest Hire to Oldest', action: function(e, dt, node, config) { dt.order( [9, 'desc'] ).draw(); selectedButtonText = "Newest Hire to Oldest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Oldest Hire to Newest', action: function(e, dt, node, config) { dt.order( [9, 'asc'] ).draw(); selectedButtonText = "Oldest Hire to Newest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Highest to Lowest', action: function(e, dt, node, config) { dt.order( [8, 'desc'] ).draw(); selectedButtonText = "Score Highest to Lowest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } }, { text: 'Score Lowest to Highest', action: function(e, dt, node, config) { dt.order( [8, 'asc'] ).draw(); selectedButtonText = "Score Lowest to Highest"; $("button.buttons-collection span").html(selectedButtonText + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>'); } } ]
},
buttons: [{ extend: 'collection', className: 'stylExportMenu', text: selectedExcelButtonText  + '<i class="material-icons stylSortButtonArrow">keyboard_arrow_down</i>', autoClose: true, attr: { id: 'dataExportCollection' }, buttons: [{text:'Export Excel', attr: { id: 'dataExcelBtn' }, action: function(e, dt, node, config) { document.getElementById('btnExcel').click(); } }, {text:'Export CSV', attr: { id: 'dataCSVBtn' }, action: function(e, dt, node, config) { document.getElementById('btnCSV').click(); }}],
});

Open in new window


I tried to remove the information that wasn't relevant to the question, so in my removal of code I might have accidentally taken out a bracket or parenthesis that was needed, but the buttons themselves are working.I just need to style the dt-button-collection menu.

I just need help figuring out how to customize the width of the menu for the second collection #dataExportCollection. It needs to be a smaller menu size than the #dataSortBy collection. I have tried:

.dt-button-collection:nth-child(1) {
     width: 100px !important;
}

Open in new window

and
.dt-button-collection:nth-of-type(1) {
     width: 100px !important;
}

Open in new window

The first one didn't work at all and the second one applied it to both menus. I think because only one menu is ever showing at a time.

I also can't target the button collection like this:
#dataExportCollection > .dt-button-collection {
width: 100px !important;
}

Open in new window

because the .dt-button-collection menu is not inside the same container as the button or inside any type of container that I can assign a different id to than the other collection menu. Does anyone know of a way that I can customize this second menu so it doesn't have the same long width of the first menu?
Comment
Watch Question
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 3 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE