In the past, I have successfully created DataTables that display dynamic data. I have also added the TableTools plug-in to be able to export the data to CSV, Excel, Copy/Pase, etc.
However, when I add a bootstrap modaldialog box and place the table inside, the buttons do not work (except the print button ... that does). This is the case for all web browsers.
Here is a scaled-down jsFiddle of my issue: http://jsfiddle.net/h3WDq/1210/
HTML CODE
<h3>Modal TableTool Example</h3>
<!-- Button to trigger modal -->
<div>
<a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<table class="table table-striped table-hover table-bordered" id="tblResults">
<thead>
<tr>
<th>ID</th>
<th>Date</th>
<th>Event Code</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<style>
JS CODE
$(document).ready(function() {
var dataSet = [
["1", "2016/03/01", "Test 1"],
["2", "2016/03/02", "Test 2"],
["3", "2016/03/03", "Test 3"],
["4", "2016/03/04", "Test 4"],
["5", "2016/03/05", "Test 1"],
["6", "2016/03/06", "Test 2"],
["7", "2016/03/07", "Test 3"],
["8", "2016/03/08", "Test 4"],
["9", "2016/03/09", "Test 1"],
["10", "2016/03/10", "Test 2"],
["11", "2016/03/11", "Test 3"],
["12", "2016/03/12", "Test 4"],
];
var table = $('#tblResults').DataTable({
data: dataSet,
columns: [{
title: "ID"
}, {
title: "Date"
}, {
title: "Event Code"
}]
});
var tableTools = new $.fn.dataTable.TableTools(table, {
'sSwfPath': 'http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf',
'aButtons': ['copy',
'csv', {
'sExtends': 'xls',
sFileName: '*.xls'
},
'pdf',
'print'
],
});
$(tableTools.fnContainer()).insertBefore('#tblResults_wrapper');
});
Any help would be appreciated.