dataTables export button display in custom position?

Question

I want to show my dataTable export button in custom div . how can I Do this ?

my Current code

this is default code and buttons show seperatly on top of my table. how can I edit this?

  $(document).ready(function() {
        $('#example').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'excelHtml5',
                'csvHtml5',

            ]
        } );

} );

where I want to display

            <select id="ex">
                <option>Export </option>
                <option id="csv" >CSV</option>
                <option id="xls" >XLS</option>
            </select>

here is the fiddle https://jsfiddle.net/qt9p2fwt/3/

Answer 1

It is quite a headache to clone the button events and destroy the elements. Why not just hide the buttons panel and click the buttons programmatically? Can be automized this way :

<select id="exportLink">
   <option>Export userlist</option>
   <option id="csv">Export as CSV</option>
   <option id="excel">Export as XLS</option>
   <option id="copy">Copy to clipboard</option>                                                
   <option id="pdf">Export as PDF</option>
</select>

Add a initComplete handler to the dataTables initialization options :

initComplete: function() {
  var $buttons = $('.dt-buttons').hide();
  $('#exportLink').on('change', function() {
    var btnClass = $(this).find(":selected")[0].id 
      ? '.buttons-' + $(this).find(":selected")[0].id 
      : null;
    if (btnClass) $buttons.find(btnClass).click(); 
  })
} 

updated fiddle -> https://jsfiddle.net/qt9p2fwt/17/