javascript - 按钮不显示
问题描述
我是 JQuery DataTables 的新手,但我认为我遵循了有关如何添加按钮的指南。显示 X 条记录现在消失了,但按钮不存在。这是我的代码,需要修改什么才能显示按钮?
这是我的代码 - 但我只是注意到我遇到了一些错误,dangit
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>```
解决方案
如上一篇文章所述(已删除),您共享了与 Jquery Datatables 相关的所有 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>