How to show the Export buttons inside a bootstrap modal?

Question

I am using Data Tables jQuery Plugin. There are predefined export buttons - EXCEL, PDF, COPY, CSV, etc. 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?

Thanks in advance.

Regards.

Code looks like below. Instead of the Excel, PDF and Copy buttons at the top of the table, I want user to click on Options button, then modal pops up and 3 buttons are shown to user. When user clicks on any one button respective export is done.

<!DOCTYPE html>
<html>
<head>
	<title>Data Table Example</title>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet">

</head>
<body>


<div class="container">

	<div class="row text-right">
		<button data-toggle="modal" data-target="#export-modal" class="btn btn-primary">Options</button>
	</div>
	    
	<div class="row">
	    <div class="modal fade" id="export-modal" tabindex="-1" role="dialog">
	        <div class="modal-dialog" role="document">
	            <div class="modal-content">
	                <div class="modal-header">
	                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
	                    <h4 class="modal-title">Options</h4>
	                </div>
	                <div class="modal-body">
	                    <p>How would you like to export?</p>
	                    <button type="button" class="btn btn-primary">Excel</button>
	                    <button type="button" class="btn btn-success">PDF</button>
	                    <button type="button" class="btn btn-danger">Copy</button>
	                </div>
	            </div><!-- /.modal-content -->
	        </div><!-- /.modal-dialog -->
	    </div><!-- /.modal -->


	</div>

	<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
		<thead>
			<tr>
				<th>First name</th>
				<th>Last name</th>
				<th>Position</th>
				<th>Office</th>
				<th>Age</th>
				<th>Start date</th>
				<th>Salary</th>
				<th>Extn.</th>
				<th>E-mail</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Tiger</td>
				<td>Nixon</td>
				<td>System Architect</td>
				<td>Edinburgh</td>
				<td>61</td>
				<td>2011/04/25</td>
				<td>$320,800</td>
				<td>5421</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td>Garrett</td>
				<td>Winters</td>
				<td>Accountant</td>
				<td>Tokyo</td>
				<td>63</td>
				<td>2011/07/25</td>
				<td>$170,750</td>
				<td>8422</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td>Ashton</td>
				<td>Cox</td>
				<td>Junior Technical Author</td>
				<td>San Francisco</td>
				<td>66</td>
				<td>2009/01/12</td>
				<td>$86,000</td>
				<td>1562</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td>Cedric</td>
				<td>Kelly</td>
				<td>Senior Javascript Developer</td>
				<td>Edinburgh</td>
				<td>22</td>
				<td>2012/03/29</td>
				<td>$433,060</td>
				<td>6224</td>
				<td>[email protected]</td>
			</tr>
			<tr>
				<td>Airi</td>
				<td>Satou</td>
				<td>Accountant</td>
				<td>Tokyo</td>
				<td>33</td>
				<td>2008/11/28</td>
				<td>$162,700</td>
				<td>5407</td>
				<td>[email protected]</td>
			</tr>
			
		</tbody>
	</table>

</div>


<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/vfs_fonts.js"></script>

<script>

    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',
            },
		],

    });

</script>
</body>
</html>

@davidkonrad thanks for the tip. Please see the above code, it is self contained. Excel export does not seem to work(works locally), copy and pdf export work properly. — RyuCoder

Daniel Arthur Daniel Arthur · Accepted Answer · 2017-04-27T17:51:23

The Bootstrap website has some really great documentation that will tell you how to do just this!

This website has some great info on how to use modals, and I adapted one of the tutorials and created this Bootsnipp snippet that does exactly what you need :)

http://bootsnipp.com/user/snippets/GQb5R

How to show the Export buttons inside a bootstrap modal?

2 Answers