Set custom buttons with different class names

bbrindza

I have 5 custom button that I would like to change the color using Bootstrap 4 classNames. I am able to override the dataTable classes by using dom: , but how do I do this for each button?

    buttons: {
        buttons: [
                 { text: 'Time In',
                   attr: {id: 'timeInButton' },
                   action: function ( e, dt, node, config ) { timeIn() }
                 },
                 {  text: 'Lunch Out',
                    attr: {id: 'lunchOutButton'},
                    action: function ( e, dt, node, config ) { lunchOut() }
                 },
                 {  text : 'Lunch In', 
                    attr: { id: 'lunchInButton'},
                    action: function ( e, dt, node, config ) {lunchIn() }
                 },
                 { text: 'Time Out',
                   attr: { id: 'timeOutButton'},
                   action: function ( e, dt, node, config ) {timeOut() }
                  },
                 { text: 'Create Out of Office Entry',
                   attr: { id: 'OutOfOfficeButton'},
                   action: function ( e, dt, node, config ) {createOutOfOffice() }
                  }
            ],
        dom: {
              button: { className: "btn btn-primary"},
              buttonLiner: { tag: null }
             }
    },

bbrindza

Further clarification... I want to change the OutOfOfficeButton to be "btn btn-secondary"

kthorngren

Try buttons.buttons.className on the individual buttons.

Kevin

bbrindza

I have already tried that but it does not override the dt-buttons class

rf1234

I use bootstrap 3 and could change the color of a button simply by using className for the individual button. Here is an example:

.btn-showall-color {
    background-color: #337AB7;
    color: white;
}

//custom button added with language specific label
$.fn.dataTable.ext.buttons.showAll = {
    text: showAllLabel,
    className: 'btn-showall-color hidden',
    name: "showAllButton",
    action: function ( e, dt, button, config ) {
        dt.rows({ selected: false }).nodes().to$().removeClass('hidden');
        dt.rows({ selected: true }).deselect();            
        dt.buttons('showAllButton:name').nodes().addClass('hidden');          
        //if show all button is clicked, a potential search will be reset and the table is redrawn.
        if (dt.search() > '') {
            dt.search('').draw();
        }
    }
};

hendra1901

try this

for one button

buttons: {
    buttons: [
             {
               text: 'button one'
             },
             {
               text: 'button two'
             },
             {
               text : 'button three'
               className: 'btn-danger'
             }
        ],
     dom: {
          button: {
               className: 'btn btn-primary'
          },
          buttonLiner: {
               tag: null
          }
         }
}

for each button

buttons: {
    buttons: [
             {
               text: 'button one',
               className: 'btn-primaryr'
             },
             {
               text: 'button two',
               className: 'btn-secondary'
             },
             {
               text : 'button three',
               className: 'btn-danger'
             }
        ],
     dom: {
          button: {
               className: 'btn'
          },
          buttonLiner: {
               tag: null
          }
         }
}

bbrindza

Hendra... that did the trick. Thank You