I am having trouble showing the export buttons, it works perfectly if the data is not fetched from database with the basic example however they are not showing with my php code, I have included the script and necessarry files from https://live.datatables.net/kugajayu/1/edit. Please help, below is my script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Delivery System- Admin Users</title>
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<!-- Custom styles for this page -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
<script type="text/javascript" src= "https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src= "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.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.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<script>
$(document).ready(function () {
$('#tabela').DataTable({
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'pdf'
]
});
});
</script>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<?php include 'side_bar.php';?>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<?php include 'nav_bar.php';?>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">View Admin Users</h1>
<?php if(isset($_GET['delete'])){?>
<div class="alert alert-success" role="alert">
<?php echo "The Admin User has been deleted Successfully"; ?>
</div>
<?php }?>
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="tablea" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if($num_user > 0) {
while($user_row=mysqli_fetch_assoc($user_query)) {?>
<tr>
<td><?php echo $user_row['f_Name'];?> <?php echo $user_row['l_Name'];?></td>
<td><?php echo $user_row['email'];?></td>
<td><?php echo $user_row['password'];?></td>
<td>
<a href="view_users.php?act=del&user_id=<?php echo base64_encode($user_row['user_id']); ?>" onclick="return confirm('Are you sure you want to delete this Admin User!!!');" class="btn btn-danger btn-circle"><i class="fas fa-trash"></i></a>
</td>
</tr>
<?php } } else { ?>
<tr>
<td>No Admin User Found</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<?php include 'footer.php';?>
<!-- End of footer -->
</body>
</html>There are no console errors so I am not sure what I'm doing wrong