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(); }}],
});
.dt-button-collection:nth-child(1) {
width: 100px !important;
}
and .dt-button-collection:nth-of-type(1) {
width: 100px !important;
}
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.#dataExportCollection > .dt-button-collection {
width: 100px !important;
}
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?
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.