HotTomales
HotTomales

Reputation: 564

Buttons Are Not Displaying

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

Answers (1)

mike85
mike85

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:

  1. Extra script inside script tag
  2. Missing closing of script tag symbol > 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

Related Questions