columnsVisibility buttons not getting className extend

Rick Hansen

Using bootstrap styles, I have the following buttons (example below)... All of them are being "extended" properly with the exception of the columnsVisibility buttons. With this button set the the className is not being applied to the <a> tags of the columnsVisibility buttons that get generated for each column name. How can I otherwise get those buttons styled just like the other ones? Note how the btn-sm class was not applied to the columnsVisibility buttons where it should have been.

Is there a simple style override work-around for this that I can put into the "last" css sheet in the page to re-style the columnVisibility buttons?

The Generated dom HTML looks like this (why is btn-sm class not on the last 6 buttons?):

<div class="dt-buttons btn-group">

<a class="btn btn-default buttons-copy buttons-html5 btn-sm" tabindex="0" aria-controls="activityTable" href="#" title="Copy data grid to clipboard"><span>Copy</span></a>

<a class="btn btn-default buttons-pdf buttons-html5 btn-sm" tabindex="0" aria-controls="activityTable" href="#" title="Copy data grid to a PDF file"><span>PDF</span></a>

<a class="btn btn-default buttons-csv buttons-html5 btn-sm" tabindex="0" aria-controls="activityTable" href="#" title="Copy data grid to a CSV file"><span>CSV</span></a>

<a class="btn btn-default buttons-excel buttons-html5 btn-sm" tabindex="0" aria-controls="activityTable" href="#" title="Copy data grid to a Excel file"><span>Excel</span></a>

<a class="btn btn-default buttons-print btn-sm" tabindex="0" aria-controls="activityTable" href="#" title="Print data grid"><span>Print</span></a>

<a class="btn btn-default buttons-columnVisibility active" tabindex="0" aria-controls="activityTable" href="#"><span>Name</span></a>

<a class="btn btn-default buttons-columnVisibility active" tabindex="0" aria-controls="activityTable" href="#"><span>Position</span></a>

<a class="btn btn-default buttons-columnVisibility active" tabindex="0" aria-controls="activityTable" href="#"><span>Office</span></a>

<a class="btn btn-default buttons-columnVisibility active" tabindex="0" aria-controls="activityTable" href="#"><span>Age</span></a>

<a class="btn btn-default buttons-columnVisibility active" tabindex="0" aria-controls="activityTable" href="#"><span>Start date</span></a>

<a class="btn btn-default buttons-columnVisibility active" tabindex="0" aria-controls="activityTable" href="#"><span>Salary</span></a>

</div>

The table buttons are configured like this:

_ ipcRenderer.on('api_GetActiveVehicles_Callback', function(event, arg) {
tableActivity = $('#activityTable').DataTable( {
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"bRetrieve": true,
buttons: [
{
extend: 'copyHtml5',
text: 'Copy',
titleAttr: 'Copy data grid to clipboard',
className: 'btn btn-default btn-sm',
exportOptions: { columns: ':visible' }
},
{
extend: 'pdfHtml5',
text: 'PDF',
titleAttr: 'Copy data grid to a PDF file',
className: 'btn btn-default btn-sm',
exportOptions: { columns: ':visible' }
},
{
extend: 'csvHtml5',
text: 'CSV',
titleAttr: 'Copy data grid to a CSV file',
className: 'btn btn-default btn-sm',
exportOptions: { columns: ':visible' }
},
{
extend: 'excelHtml5',
text: 'Excel',
titleAttr: 'Copy data grid to a Excel file',
className: 'btn btn-default btn-sm',
exportOptions: { columns: ':visible' }
},
{
extend: 'print',
text: 'Print',
titleAttr: 'Print data grid',
className: 'btn btn-default btn-sm',
exportOptions: { columns: ':visible' }
},
{
extend: 'columnsVisibility',
className: 'btn btn-default btn-sm'
},
]
});_

Rick Hansen

Wound up doing this:

...
var columnButtons = document.getElementsByClassName("buttons-columnVisibility");
for (i = 0; i < columnButtons.length; i++) {
columnButtons[i].className = 'btn btn-default buttons-columnVisibility btn-sm active'
}
...