Change of button style

Learn2excel

Hello All,

I am new to development. I need help with changing the appearance of Export to Excel and Clear filters buttons on some of the pages using Bootstrap. Can someone help me with this.

Attached images of buttons how they appear now (Image 2) (in grey color) and how they need to appear (Image 1). As per the newest version of bootstrap, it appears grey in color as in Image 2. But if we can change it to earlier version as in Image 1.

I am using the below code for exp to excel button:

buttons: [
{
extend: 'excelHtml5',
text: '<i class="btn_excel btn_default"></i> <span class=btn_text_align>Export to Excel</span>',
className: 'btn-sm btn_size',
titleAttr: 'Export to Excel',
exportOptions: {
columns: tableId === '#tblPDM' ? [1, 2, 3, 4, 5, 6] : [1, 2],

Thank you

Rajagopallan

allan

Have you see this example on how to use icons in the buttons? You might need to change the className for the buttons as well - this is where I set the default. You might want to do something like:

DataTables.Buttons.defaults.bom.button.className = 'btn btn-light';

Allan

Learn2excel

Hi Allan

Thank you for your response.

My Datatable initialization is done as below, it's in the source JS file: Then the dom property, and then the buttons object code follow as given in my first reply.

$.fn.createDataTable = function (columns, ajaxOptions, order, initComplete = null) {
const tableId = "#" + $(this).attr("id");
const _dt = $(tableId).DataTable({.........

dom: (only refers to row dt and col parts of the table)

buttons:

so where i should be adding the code $.extend(true, DataTable.Buttons.defaults, given by you. if you could proivde me full code as a continuation to mine it would be helpful

Regards
Rajagopallan

allan

Add it just before your DataTables initialisation.

Allan

Learn2excel

Hi Allan

I tried adding the code before Datatables initialization like below, but it did not work. Is there any other alternative way to do this.

$.extend(true, DataTable.Buttons.defaults,

$.fn.createDataTable = function (columns, ajaxOptions, order, initComplete = null) {
const tableId = "#" + $(this).attr("id");
const _dt = $(tableId).DataTable({.........

dom: (only refers to row dt and col parts of the table)

buttons:

Regards
Rajagopallan

allan

Hi Rajagopallan,

Here is a running example: https://live.datatables.net/nigeteva/1/edit . The only thing left to do is add the icons, which you can do using the text option for each button and setting an img tag to display as needed (or you could do it with CSS).

Allan

Learn2excel

Hi Allan

I used the below code before datatables initialization
$.fn.dataTable.Buttons.defaults.dom.button.className = 'btn-light';

then i applied the required style to the buttons, it looks to be working and almost there but still a minor adjustment needed. After I have added the required styles and classes to the button and button text, then I get the below appearance of the button.

Now, if you see the image, you will notice there is a black background behind the buttons, how can I get rid of this.

Regards
Rajagopallan

allan

I'm not seeing that in my example. Can you update my example or give me a link to a page showing the issue so I can offer some help?

Thanks,
Allan

Learn2excel

Hi Allan

I found the code $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn-light'; from below page

https://datatables.net/forums/discussion/43723/how-can-i-remove-default-button-class-of-datatable-btn-default

the problem i guess is because the latest version of bootstrap is causing the background to appear in black though I was able to update the buttons color

Regards
Rajagopallan

allan

Without being able to see it I'm afraid I can't really say where the black border is coming from.

Allan

Learn2excel

Hi Allan,

The issue is fixed now. Thank you for your response.

Regards
Rajagopallan

allan

Out of interest, what was it in the end?

Allan

Learn2excel

Hi Allan

The use of className = "btn btn-light" in the first line provided the close to expected result and then in addition some changes to CSS styling was also done to achieve the desired result.

Thank you

Regards
Rajagopallan

allan

Super - thank you.

Allan