Answers

• jLinux Posts: 981Questions: 73Answers: 75

  November 2015 edited November 2015

  You can use the className option to assign classes to them, and use the buttons().container() to put them into a container. Thats what I did with mine..

  Heres the exact code for my DT Buttons

  function manage_buttons( dt ) {
      dt = DT.get_api( dt );
  
      // Name of the filename when exported (except for extension)
      var export_filename = 'Assets-' + tools.date( '%d-%M-%Y' );
  
      // Configure Export Buttons
      new $.fn.dataTable.Buttons( dt, {
          buttons: [
              {
                  text: '<i class="fa fa-lg fa-clipboard"></i>',
                  extend: 'copy',
                  className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-copy ttip'
              }, {
                  text: '<i class="fa fa-lg fa-file-text-o"></i>',
                  extend: 'csv',
                  className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-csv ttip',
                  title: export_filename,
                  extension: '.csv'
              }, {
                  text: '<i class="fa fa-lg fa-file-excel-o"></i>',
                  extend: 'excel',
                  className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-xls ttip',
                  title: export_filename,
                  extension: '.xls'
              }, {
                  text: '<i class="fa fa-lg fa-file-pdf-o"></i>',
                  extend: 'pdf',
                  className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-pdf ttip',
                  title: export_filename,
                  extension: '.pdf'
              }
          ]
      } );
  
      // Add the Export buttons to the toolbox
      dt.buttons( 0, null ).container().appendTo( '#export-assets' );
  
  
      // Configure Print Button
      new $.fn.dataTable.Buttons( dt, {
          buttons: [
              {
                  text: '<i class="fa fa-lg fa-print"></i> Print Assets',
                  extend: 'print',
                  className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn export-print'
              }
          ]
      } );
  
      // Add the Print button to the toolbox
      dt.buttons( 1, null ).container().appendTo( '#print-assets' );
  
  
      // Select Buttons
      new $.fn.dataTable.Buttons( dt, {
          buttons: [
              {
                  extend: 'selectAll',
                  className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
              }, {
                  extend: 'selectNone',
                  className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
              }
          ]
      } );
  
      // Add the Select buttons to the toolbox
      dt.buttons( 2, null ).container().appendTo( '#select-assets' );
  
  
      // Configure Selected Assets Buttons (delete, timeline, etc)
      new $.fn.dataTable.Buttons( dt, {
          buttons: [
              {
                  text: 'Delete Selected',
                  action: function () {
                      assets.delete_from_list(dt, assets.selected_ids( dt ) );
                  },
                  className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn toolbox-delete-selected'
              }, {
                  text: 'View Timeline',
                  action: function () {
                      console.log(assets.selected_ids( dt ));
                  },
                  className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
              }
          ]
      } );
  
      // Add the selected assets buttons to the toolbox
      dt.buttons( 3, null ).container().appendTo( '#selected-assets-btn-group' );
  
  
      // Configure Select Columns
      new $.fn.dataTable.Buttons( dt, {
          buttons: [
              {
                  extend: 'collection',
                  text: 'Select Columns',
                  buttons: [ {
                      extend: 'columnsToggle',
                      columns: ':not([data-visible="false"])'
                  } ],
                  className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
              }
          ],
          fade: true
      } );
  
      // Add the select columns button to the toolbox
      dt.buttons( 4, null ).container().appendTo( '#toolbox-column-visibility' );
  }
  

  Heres the screenshot of the result, those are all DT buttons, but they're totally customized
• jLinux Posts: 981Questions: 73Answers: 75

  November 2015

  You should also be able to just inspect the buttons in the DOM and create custom CSS for whatever classes they may have