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/
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 :
Add a
initComplete
handler to the dataTables initialization options :updated fiddle -> https://jsfiddle.net/qt9p2fwt/17/