Datatables excel pdf buttons not showing - jquery datatable - datatables

Question

I'm working on asp.net website using master pages. I want to display data in jquery datatable in my content page but it is giving me an error
Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument. (StoreInwardRegister.aspx:49)
at j (jquery-1.11.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.3.min.js:2)
at Function.ready (jquery-1.11.3.min.js:2)
at HTMLDocument.J (jquery-1.11.3.min.js:2)
script files in site.master page:
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png" />
<link href="assets/libs/flot/css/float-chart.css" rel="stylesheet" />
<link href="dist/css/style.min.css" rel="stylesheet" />
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="dist/js/sidebarmenu.js"></script>
<script src="dist/js/custom.min.js"></script>
<script src="assets/libs/inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
<script src="dist/js/pages/mask/mask.init.js"></script>
<script src="assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="assets/libs/select2/dist/js/select2.min.js"></script>
<script src="assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="assets/libs/quill/dist/quill.min.js"></script>
Script files in my content page where I want to implement datatable and excel, pdf export from databale
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" 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.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
Datatable code:
<script type="text/javascript">
$(document).ready(function () {
$('#tblReport').DataTable({
"ajax": {
"url": "Helper/DataTableService.asmx/StoreRegisterReport",
"type": "POST",
"datatype": "json",
dataSrc: ""
},
"processing": true,
"columns": [
{
'data': 'Date', 'render': function (date) {
var date = new Date(parseInt(date.substr(6)));
var month = date.getMonth() + 1;
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
{ 'data': 'No' },
{ 'data': 'SupplierName' },
{ 'data': 'DCBillNo' },
{
'data': 'DCBillDate', 'render': function (date) {
var date = new Date(parseInt(date.substr(6)));
var month = date.getMonth() + 1;
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
{ 'data': 'MatDesc' },
{ 'data': 'TransportDet' },
{ 'data': 'InwardOutward' },
],
dom: 'lfrtipB',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
});
});
</script>
It is showing an error in console:
Datatable is not a function
But when I write defer at the end of <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" defer></script> Then it is displaying datatable but not showing excel, pdf buttons,
also showing an error in console that
Uncaught TypeError: Cannot read property 'ext' of undefined
at dataTables.buttons.min.js:8
Uncaught TypeError: Cannot read property 'Buttons' of undefined
at buttons.flash.min.js:30
at buttons.flash.min.js:8
Uncaught TypeError: Cannot read property 'Buttons' of undefined
at buttons.html5.min.js:11
at buttons.html5.min.js:8
Uncaught TypeError: Cannot read property 'ext' of undefined
at buttons.print.min.js:6
at buttons.print.min.js:5
what can be the issue?