Bootstrap 示例中未显示数据表按钮

知道为什么在使用此代码进行引导时按钮(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)不起作用......


墨色风雨
浏览 250回答 3
3回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript