Reputation: 564
I am new to JQuery DataTables, but I think I followed the guide on how to add the buttons. The display X number of records is now gone, but the buttons are not there. This is my code, what needs to be modified so the buttons will be displayed?
This is my code - but I just noticed I am getting a few errors, 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>```
Upvotes: 2
Views: 1218
Reputation: 631
As mentioned on previous post (it was deleted) you shared all javascript and css file included related to Jquery Datatables.
Actually your link contains incomplete/error of HTML link tag. Few of your mistake quoted below:
<script type="text/javascript" charset="utf8" script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"</script>
Your mistakes was:
script
inside script tag>
before </script>
So the fixed one will like this
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
Run snippet below with fixed link
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>
Upvotes: 1