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 在调用后尚未准备好DataTable()。我正在使用 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 2

使用dom参数

"dom": 'Blfrtip'

• B - 纽扣
• l - 长度改变输入控制
• f - 过滤输入
• r - 处理显示元素
• t - 桌子
• i - 表信息汇总
• p - 分页控制

直接插入

选择器将是#reminders_wrapper或

table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container()) );

"dom": 'Blfrtip'

table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container()) );