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

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 :

   Export userlist
   Export as CSV
   Export as XLS
   Copy to clipboard                                                
   Export as PDF

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/