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 :

<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/

Answer 2

I was looking for something similar i.e. rendering the buttons in drop-down. The easiest solution was to use datatable's collection button option.

 buttons: [
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
        ]

Ref: https://editor.datatables.net/examples/extensions/exportButtons.html

Hope this might help someone.

Thanks!