【发布时间】：2017-09-25 15:31:56
【问题描述】：
我正在使用数据表 jQuery 插件。有预定义的导出按钮 - EXCEL、PDF、COPY、CSV 等。我想使用 3 个导出按钮 - Excel、PDF、复制（HTML5 版本）。页面上会有一个选项按钮，当用户点击选项按钮时，应该会弹出一个引导模式，用户应该会在模式中看到上述 3 个按钮。
实现此结果的最佳方法是什么？
提前致谢。
问候。
代码如下所示。 我希望用户单击选项按钮，而不是表格顶部的 Excel、PDF 和复制按钮，然后弹出模式并向用户显示 3 个按钮。 当用户点击任何一个按钮时，相应的导出就完成了。
<!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>t.nixon@datatables.net</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>g.winters@datatables.net</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>a.cox@datatables.net</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>c.kelly@datatables.net</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>a.satou@datatables.net</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 感谢您的提示。请看上面的代码，它是自包含的。 Excel 导出似乎不起作用（在本地工作），复制和 pdf 导出工作正常。
标签： jquery jquery-plugins datatables