按钮不显示

Question

我是 JQuery DataTables 的新手，但我想我遵循了有关如何添加按钮的指南。显示 X 条记录现在消失了，但按钮不存在。这是我的代码，需要修改什么才能显示按钮？这是我的代码 - 但我刚刚注意到我遇到了一些错误，dangitbuttons.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:8buttons.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:8jquery-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, '$'),            },        ]    });});</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>

你的错误是：

额外的script内部脚本标签

缺少脚本标记符号的收盘>前</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>