Change of button style
Change of button style
Learn2excel
Posts: 33Questions: 5Answers: 1
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
Replies
Have you see this example on how to use icons in the buttons? You might need to change the
classNamefor the buttons as well - this is where I set the default. You might want to do something like:Allan
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
Add it just before your DataTables initialisation.
Allan
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
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
textoption for each button and setting animgtag to display as needed (or you could do it with CSS).Allan
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
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
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
Without being able to see it I'm afraid I can't really say where the black border is coming from.
Allan
Hi Allan,
The issue is fixed now. Thank you for your response.
Regards
Rajagopallan
Out of interest, what was it in the end?
Allan
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
Super - thank you.
Allan