How do I apply an additional class to div.dt-buttons?

muhammedc

Hello Allan/Everyone... Im looking for some assistance please...

I have the following code:

 $(document).ready(function() {
     var table = $('#appquery').DataTable({
      paging: false,
      ordering: false,
      info: false,
      searching: false,
      dom: 'Bfrtip',
      buttons: [{
        extend: 'copyHtml5',
        text: '<i class="fa fa-files-o"></i>',
        titleAttr: 'Copy'
       },
    
      ],
      responsive: {
       details: {
        display: $.fn.dataTable.Responsive.display.childRowImmediate,
        type: 'none',
        target: '',
        renderer: function(api, rowIdx, columns) {
         var data = $.map(columns, function(col, i) {
          return col.hidden ?
           '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
           '<td>' + col.title + ':' + '</td> ' +
           '<td>' + col.data + '</td>' +
           '</tr>' :
           '';
         }).join('');
    
         return data ?
          $('<table/>').append(data) :
          false;
        }
       }
      }
     });
     new $.fn.dataTable.Buttons(table, {
      buttons: [{
        text: 'Back',
            name: 'backgrp',
            className: 'btnback',
        action: function(e, dt, node, config) {
         history.go(-1);
        },
        init: function(api, node, config) {
         $(node).removeClass('btn-default'),
          $(node).addClass('btn-danger')
        }
       },
      ]
     });
    
     table.buttons(1, null).container().appendTo(table.table().container());
    });

This allows me to have 2 buttons, one on top of the table and the other at the bottom. I would like to have the top button float:right while the bottom button float:left. I would be able to do this using css if the div dt-buttons for each button allowed me to add a differentiating class. Any idea how to add an additional class to that div? Alternatively any idea how to achieve my button layout another way?

allan

The buttons().container() method you've used in the above gives you the container element for the buttons (i.e. div.dt-buttons) so you would just use $().addClass() on that:

table.buttons(1, null).container()
  .addClass( 'myClass' )
  .appendTo(table.table().container());

Allan

muhammedc

Thank you so much Allan - That worked like a charm!