Answers

• jLinux Posts: 981Questions: 73Answers: 75

  October 2015

  Your best bet would be to use the buttons() api. I wanted to use a lot of the buttons (colvis, copy, select, print, etc etc), but I wanted them to show up in a div that would slide out from the left of the screen.

  Screenshots: http://d.pr/i/EnPN & http://d.pr/i/PrTJ

  They're all DataTables buttons, and I used the button() api. Heres my code, Ill leave as much of it in there as I can so you can get an idea of how to use it..

  var $dt = $('#data-table' ).DataTable();
  
  // 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',
              exportOptions: {
                  columns: function ( idx, data, node ) {
                      return idx === 4 || $dt.column( idx ).visible();
                  }
              }
          }, {
              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',
              exportOptions: {
                  columns: function ( idx, data, node ) {
                      return idx === 4 || $dt.column( idx ).visible();
                  }
              }
          }, {
              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',
              exportOptions: {
                  columns: function ( idx, data, node ) {
                      return idx === 4 || $dt.column( idx ).visible();
                  }
              }
          }, {
              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',
              exportOptions: {
                  columns: function ( idx, data, node ) {
                      return idx === 4 || $dt.column( idx ).visible();
                  }
              }
          }
      ]
  } );
  
  // 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',
              //message: 'TEST!!',
              customize: function ( win ) {
                  $( win.document.body )
                      .css( 'font-size', '15px' )
                      .prepend( $( '<img />' )
                          .attr('src','https://url/wp-content/uploads/2015/08/logo-300x87.png')
                          .css({
                              position : 'absolute',
                              bottom   : '0',
                              right    : '0',
                              opacity  : '0.4',
                              filter   : 'alpha(opacity=40)'
                          })
                  );
  
                  $( win.document.body )
                      .find( 'table' )
                      .addClass( 'compact' )
                      .css( css );
              },
              extend: 'print',
              //className: 'btn btn-xs btn-primary p-5 m-0 width-120 assets-export-btn export-print'
              className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn export-print',
              exportOptions: {
                  columns: function ( idx, data, node ) {
                      return idx === 4 || $dt.column( idx ).visible();
                  }
              }
          }
      ]
  } );
  
  // 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.get_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.get_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' );