How to show the Export buttons inside a bootstrap modal?
How to show the Export buttons inside a bootstrap modal?
ganji.chetan
Posts: 2Questions: 1Answers: 0
Hi,
I want to use 3 export buttons - Excel, PDF, Copy (HTML5 Version). There will be a Options button on the page, when user clicks on the Options button, one bootstrap modal should pop up and user should see the above 3 buttons inside the modal.
What is the best way to achieve this result?
Code looks like in the comment below.
Thanks in advance.
Regards.
This discussion has been closed.
Answers
<!DOCTYPE html>
<html>
<head>
<title>Data Table Example</title>
</head>
<body>
Options
How would you like to export?
Excel PDF Copy
var dataTable = $('#example').DataTable({ "sDom": "<'exportOptions text-right'B><'table-responsive't><'row'<p>>", "scrollCollapse": true, "paging": true, // "bSort": true, "info": false, buttons: [ { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-primary', title: 'Data export', // titleAttr: 'Export all rows to Excel file', }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-primary', orientation: 'landscape', title: 'Data export', // titleAttr: 'Export all rows to PDF file', // pageSize: 'LEGAL' }, { extend: 'copyHtml5', text: 'Copy Data', className: 'btn btn-primary', // titleAttr: 'Copy all rows to clipboard', }, ], });</body>
</html>
You want a DataTable inside a modal which has the export buttons? You'd do it in exactly the same way as you would with a DataTable inside a modal. Just initialise it when you create the modal.
Allan