How can i change my buttons color please help me :(

dnepomuceno101

var dStudALl = $('#deanstudundr').DataTable( { responsive: true,}); new $.fn.dataTable.Buttons( dStudALl, { buttons: [{ extend: 'pdfHtml5', className: "btn-sm btn-primary btn-rounded", text: 'PDF', }, { extend: 'excelHtml5', className: "btn-sm btn-primary btn-rounded", text: 'EXCEL', }, { extend: 'print', className: "btn-sm btn-primary btn-rounded", text: 'PRINT', } ] } ); dStudALl.buttons().container() .appendTo( $(dStudALl.table().container() ) );

JuJoGuAl

if you wanna define a primary class for all bottons use:

    buttons: {
        dom: {
            button: {
                className: 'btn btn-outline-info mr-2' //Primary class for all buttons
            }
        },
        buttons: [                   
            {
                //EXCEL
                extend: 'excelHtml5', //extend the buttons that u wanna use
            }
        ]
    }

With the DOM u can define the class to all your buttons

dnepomuceno101

ok

JuJoGuAl

if you see the manual:

you can control the tags used and the class names. You can also optionally control the structure of the markup for the buttons

https://datatables.net/reference/option/buttons.dom

That means you can define you own class for the buttons, and then invoque the buttons that u will use, show me the full code

dnepomuceno101

can u tell me wheres the css for this button it really hides my button idk why

dnepomuceno101

can i change it in buttons.bootstrap4.js directly?

JuJoGuAl

is better put all your Data Table CODE here to understand your problem

dnepomuceno101

dnepomuceno101

here it work if i put btn light but if i use btn-primary it default to secondary

JuJoGuAl

I guess it will work:

jQuery(function () {
    jQuery('#teachListReq').DataTable({
        responsive: true,
        buttons: {
            dom: {
                button: {
                    className: 'btn btn-light btn-sm btn-rounded'
                }
            },
            buttons: [
                {
                    //EXCEL
                    extend: 'excelHtml5',
                    //text: '<i class="fas fa-file-excel"></i> EXCEL', //u can define a diferent text or icon
                    title: 'Student Letter Request List',
                },
                {
                    //PRINT
                    extend: 'print',
                    //text: '<i class="fas fa-print"></i> IMPRIMIR',
                    title: 'Student Letter Request List',
                },
                {
                    //COPY
                    extend: 'copy',
                    //text: '<i class="fas fa-print"></i> IMPRIMIR',
                    title: 'Student Letter Request List',
                }
            ]
        },
    });
});

dnepomuceno101

it hides my button sir why?

dnepomuceno101

there's really something wrong with my code

dnepomuceno101

im using this

dnepomuceno101

it hides my buttons

kthorngren

See if this threda or this thread helps.

Kevin

dnepomuceno101

i read all the discussion here nothing helps me , do i need to remove some words in the .JS folder

dnepomuceno101

$(".btn-primary").removeClass("btn-secondary");
where do i put this code maybe it will help me

JuJoGuAl

well, first Use just ONE COMMENT to add yours answers, second, put the CODE in Text mode not print pics (use http://live.datatables.net/ or http://jsfiddle.net/user/dashboard/) is better to see the data, now is u cant see the buttons means u dont have bootstrap class added or something (i will need the text code)

dnepomuceno101

sorry new here

kthorngren

$(".btn-primary").removeClass("btn-secondary");
where do i put this code maybe it will help me

Try initComplete. IF you still need help then as JuJoGuAl mentions please provide a test case so we can more efficiently help you.

Kevin

dnepomuceno101

thank you for replying sir's