Set custom buttons with different class names

Set custom buttons with different class names

bbrindzabbrindza Posts: 316Questions: 73Answers: 1

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 }
             }
    },

This question has an accepted answers - jump to answer

Answers

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

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

  • kthorngrenkthorngren Posts: 21,388Questions: 26Answers: 4,961

    Try buttons.buttons.className on the individual buttons.

    Kevin

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

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

  • rf1234rf1234 Posts: 3,006Questions: 87Answers: 421

    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();
            }
        }
    };
    

  • hendra1901hendra1901 Posts: 1Questions: 0Answers: 1
    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
              }
             }
    }
    
  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    Hendra... that did the trick. Thank You

This discussion has been closed.