Answers

• bbrindza Posts: 316Questions: 73Answers: 1

  March 2020

  Further clarification... I want to change the OutOfOfficeButton to be "btn btn-secondary"
• kthorngren Posts: 21,337Questions: 26Answers: 4,954

  March 2020

  Try buttons.buttons.className on the individual buttons.

  Kevin
• bbrindza Posts: 316Questions: 73Answers: 1

  March 2020

  I have already tried that but it does not override the dt-buttons class
• rf1234 Posts: 2,991Questions: 87Answers: 421

  March 2020

  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 Posts: 1Questions: 0Answers: 1

  May 2020 Answer ✓

  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 Posts: 316Questions: 73Answers: 1

  July 2020

  Hendra... that did the trick. Thank You