对于Bootstrap示例，未显示数据表按钮

Question

有人知道为什么在使用此代码进行引导时为什么不显示按钮（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）无法正常工作...

Answer 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>

Answer 2

我刚刚检查了一下，在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.
  });
});

Answer 3

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>>"