过去,我已经成功创建了显示动态数据的DataTables。我还添加了TableTools插件,以便能够将数据导出到CSV,Excel,Copy / Pase等。
然而,当我添加一个bootstrap modaldialog框并将表放在里面时,这些按钮不起作用(除了打印按钮......)。所有Web浏览器都是如此。
以下是我的问题的缩小版jsFiddle: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');
});
任何帮助都将不胜感激。