bootstrap datatable java_DataTable Bootstrap Collection

After embedding you code on stack-snippet with the needed CDN libraries:

1) The first thing I see wrong was a darker background on the buttons. This is because the Datatables integration with Bootstrap adds class btn-secondary to the buttons. Lucky us, they provide and option called ìnit we can use to delete this class, like this:

{

extend: 'print',

init: (api, node, config) => $(node).removeClass('btn-secondary'),

className: 'btn btn-outline-success'

}

2) The second issue I note is that there is no need to add the dropdown particular classes in the className options, if you use the browser inspector you will see that they already have the correct structure and classes of Bootstrap.

Finally, you can check the complete example with the mentioned fixs:

$(document).ready(function()

{

$('.table').DataTable({

dom: 'Bfrtip',

buttons: [

{

extend: 'collection',

init: (api, node, config) => $(node).removeClass('btn-secondary'),

className: 'btn btn-outline-success',

text: 'Export',

buttons: [

{extend: 'csvHtml5'},

{extend: 'excelHtml5'}

]

},

{

extend: 'print',

init: (api, node, config) => $(node).removeClass('btn-secondary'),

className: 'btn btn-outline-success'

}

]

});

})

NamePositionOfficeAgeStart dateSalary

Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800Garrett WintersAccountantTokyo632011/07/25$170,750Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000