有人知道为什么在使用此代码进行引导时为什么不显示按钮(csv,excel,pdf,打印等)?
https://datatables.net/extensions/buttons/examples/styling/bootstrap4.html
我有这个样式:
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css" rel="stylesheet">
这是针对脚本的:
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
还有这个JS:
$(document).ready(function(){
var table = $('#reminders').DataTable({
"lengthMenu": [[50, 100, 1000, -1], [50, 100, 1000, "All"]],
"initComplete": function(){
$("#reminders").show();
},
buttons: ['copy', 'csv', 'excel', 'pdf', 'print', 'colvis']
});
table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)' );
});
但是按钮没有显示...如果我取消注释dom并使用Blfrtip,按钮会显示,但是我很好奇为什么示例中的方法(没有dom)无法正常工作...
答案 0 :(得分:1)
使用dom
参数
"dom": 'Blfrtip'
B
-按钮l
-长度更改输入控件f
-过滤输入r
-处理显示元素t
-表格i
-表信息摘要p
-分页控制直接插入
选择器将为#reminders_wrapper
或
table.buttons().container()
.appendTo( $('.col-md-6:eq(0)', table.table().container()) );
$(document).ready(function() {
var table = $('#reminders').DataTable({
//"dom": 'Blfrtip',
"lengthMenu": [
[50, 100, 1000, -1],
[50, 100, 1000, "All"]
],
"initComplete": function() {
$("#reminders").show();
},
"buttons": ['copy', 'csv', 'excel', 'pdf', 'print', 'colvis']
});
table.buttons().container().appendTo('#reminders_wrapper .col-md-6:eq(0)');
});
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<table id="reminders" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
</table>
答案 1 :(得分:0)
我刚刚检查了一下,在DataTable()
调用之后,包装器的DOM尚未准备好。我正在使用AJAX来获取数据。但是,将通话添加到initComplete
属性中是可行的:
$(document).ready(function() {
var table = $('#reminders').DataTable({
//"dom": 'Blfrtip',
"lengthMenu": [
[50, 100, 1000, -1],
[50, 100, 1000, "All"]
],
"initComplete": function() {
table.buttons().container().appendTo('#reminders_wrapper .col-md-6:eq(0)');
$("#reminders").show();
},
"buttons": ['copy', 'csv', 'excel', 'pdf', 'print', 'colvis']
// Rest of configuration.
});
});
答案 2 :(得分:0)
dom
选项不仅仅是一组用于打开/关闭数据表功能的标志。它也是用于呈现这些功能的html模板。 datatables-bootstrap-4.js覆盖了默认的dom
选项,以包含一些包装器(但不会像发现的那样添加按钮)。通过将dom
设置为Blrtip
,您将清除引导程序模板。这就是为什么没有dom
选项(但没有按钮)并且将dom
选项设置为Blrtip
会给您带来按钮但包装器消失的原因。您可以将dom
设置为datatables-bootstrap-4模板的修改版本,包括B,而不用放弃dom
选项并稍后再插入按钮(我想这很好)。按钮选项。
bootstrap-datatables-4.js对此进行设置:
'dom' : "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
因此您可以修改它以添加B标志,如下所示:
'dom' : "<'row'<'col-sm-12 col-md-6'Bl><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"