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 选项并稍后插入按钮（我想这很好用），您还可以将 dom 设置为模板 datatables-bootstrap-4 使用的修改版本，包括按钮的 B 选项。

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