javascript - 按钮不显示

Question

我是 JQuery DataTables 的新手，但我想我遵循了有关如何添加按钮的指南。显示 X 条记录现在消失了，但按钮不存在。这是我的代码，需要修改什么才能显示按钮？

这是我的代码 - 但我只是注意到我遇到了一些错误，该死的

buttons.flash.min.js:31 Uncaught TypeError: Cannot read property 'version' of undefined
    at buttons.flash.min.js:31
    at buttons.flash.min.js:8
    at buttons.flash.min.js:8
(anonymous) @ buttons.flash.min.js:31
(anonymous) @ buttons.flash.min.js:8
(anonymous) @ buttons.flash.min.js:8
buttons.html5.min.js:11 Uncaught TypeError: Cannot set property 'pdfMake' of undefined
    at buttons.html5.min.js:11
    at buttons.html5.min.js:8
    at buttons.html5.min.js:8
(anonymous) @ buttons.html5.min.js:11
(anonymous) @ buttons.html5.min.js:8
(anonymous) @ buttons.html5.min.js:8
jquery-3.4.1.js:10091 Uncaught TypeError: url.indexOf is not a function
    at jQuery.fn.init.jQuery.fn.load (jquery-3.4.1.js:10091)
    at script.min.js,qver=2.4.5.pagespeed.ce._4ES8o_qKT.js:1

<script type="text/javascript">
var information = <?php echo json_encode($data) ?>;
console.log(JSON.stringify(information[0]));
$(document).ready(function () {
    $('#my-table').dataTable({
        data: information,
        columns: [
            { data: 'EmpName' },
            { data: 'NumSales' },
            { 
              data: 'TotalSales', 
              render: $.fn.dataTable.render.number(",", ".", 2, '$'),
             },
            { 
              data: 'LMonthSales',
              render: $.fn.dataTable.render.number(",", ".", 2, '$'),
            },
            { 
               data: '2MonthSales', 
              render: $.fn.dataTable.render.number(",", ".", 2, '$'),
            },
            { 
               data: '3MonthSales', 
              render: $.fn.dataTable.render.number(",", ".", 2, '$'),
             },
            { 
               data: '4MonthSales', 
              render: $.fn.dataTable.render.number(",", ".", 2, '$'),
            },
            { 
              data: '5MonthSales', 
              render: $.fn.dataTable.render.number(",", ".", 2, '$'),
            },
            { 
               data: '6MonthSales',
              render: $.fn.dataTable.render.number(",", ".", 2, '$'),
            }
        ],
        dom: 'Bfrtip',
        buttons: [
           'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
});
</script>```

Answer 1

如上一篇文章(已删除)所述，您共享了所有与 Jquery 数据表相关的 javascript 和 css 文件。

实际上您的链接包含不完整/错误的 HTML 链接标记。下面引用了你的一些错误:

<script type="text/javascript" charset="utf8" script
src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"</script>

你的错误是:

1. 额外 script 脚本标签内
2. 缺少脚本标记符号 > 在 </script> 之前

所以固定的会喜欢这样

<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

使用固定链接运行下面的片段

var information = [
{"EmpName":"Tiger Nixon","NumSales":100,"TotalSales":100,"LMonthSales":100,"2MonthSales":100},
{"EmpName":"Tiger Nixon","NumSales":100,"TotalSales":100,"LMonthSales":100,"2MonthSales":100},
{"EmpName":"Tiger Nixon","NumSales":100,"TotalSales":100,"LMonthSales":100,"2MonthSales":100}
]

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
           'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        data: information,
        columns: [
            { data: "EmpName",title: "EmpName" },
            { 
              data: "NumSales",
              title: "NumSales", 
              render: $.fn.dataTable.render.number(",", ".", 2, '$')
            },
            { 
              data: "TotalSales",
              title: "TotalSales",
              render: $.fn.dataTable.render.number(",", ".", 2, '$')
            },
            { 
              data: "LMonthSales",
              title: "LMonthSales",
              render: $.fn.dataTable.render.number(",", ".", 2, '$')
            },
            { 
              data: "2MonthSales",
              title: "2MonthSales",
              render: $.fn.dataTable.render.number(",", ".", 2, '$')
            }
        ]
    } );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<table id="example" class="display" width="100%"></table>