How specify button background-color as hex color in configuration

hwyckoff

So I have some buttons defined. The functionality is good, but I was requested to make them "colorful" with some specific colors.

I tried the Class Name feature, where my class name only defined the specified background color (see attached screenshot). However, an extra margin appeared, the size and shape changed, and it appeared an em or two lower than the other default buttons.. How can I leave all the other button properties as-is (size, margin, padding, etc) but only define the background-color as I am trying to do?

dom: 'Bfrtip',
buttons: [
    {
                    extend: 'colvisGroup',
        text: 'Coordinate',
        /* backgroundColor: '#e0ffff' */

        show: [4, 5,6,7,8,9],
        hide: [10, 11, 12, 13]
    }]

hwyckoff

I discovered that someone else had attached some properties to my class in the less library, which showed the bizarre symptoms.

Still, it would be nice to be able to define a css attribute in config without needing to attach a class.

allan

You can use the API (button().node()) to get the HTML5 element and add styles to it that way.

Allan

pgorbas

I have found that trying to set the background color of a button with the (button().node()) api fails to work.

This fails to do anything:

        var tableX = $('#data-table').DataTable();
        tableX.button(0).nodes().css('background', 'lightred');
        tableX.button(1).nodes().css('background-color', 'lightorange');
        tableX.button(2).nodes().css('background', 'lightyellow');
        tableX.button(3).nodes().css('background', 'lightgreen');

allan

This:

var tableX = $('#example').DataTable();
tableX.button(0).nodes().css('background', 'lightyellow');

works for me in this example.

Oddly there is no lightred or lightorange in the css specifications, so they won't do anything.

Allan