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'];?> &nbsp; <?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

The documentation shows different button names.

commented: Yes I have used thr official docs +0

The documentation shows different button names.

I'm not sure what you're referring to? Can't anyone configure the buttons parameter passed into DataTable() to specify which buttons they want? Pranay_2 doesn't necessarily need to use the same buttons as in the simple example provided at that link.

I think I see the problem though. The code that you have says:

$(document).ready(function () {
    $('#tabela').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'csv', 'excel', 'pdf'
        ]
    });
});

Note you are calling DataTable() on $('#tabela'). However, line 83 of your code has:

<table class="table table-bordered" id="tablea" width="100%" cellspacing="0">

It looks like the problem is you have a typo. The table has id tablea but you are selecting on id tabela.

commented: Geez I may have missed that let me check and update you thank you +0

@Dani thank you for poiting out the typo however still no luck :(

Do you now get any javascript console errors?

commented: none the ones i get are for charts, however this page doesn't even include charts nor is there a link to any charts +0

If there is a javascript parse error in a different (unrelated) section of your code, it could prevent any javascript on your page from working.

commented: i can try and trace it ill update you soon +0

@Dani

Uncaught TypeError: Cannot read properties of null (reading 'length')
    at Object.acquireContext (Chart.min.js:7:86074)
    at tn.construct (Chart.min.js:7:102546)
    at new tn (Chart.min.js:7:102287)
    at chart-area-demo.js:32:19
acquireContext @ Chart.min.js:7
construct @ Chart.min.js:7
tn @ Chart.min.js:7
(anonymous) @ chart-area-demo.js:32

Chart.min.js:7 Uncaught TypeError: Cannot read properties of null (reading 'length')
    at Object.acquireContext (Chart.min.js:7:86074)
    at tn.construct (Chart.min.js:7:102546)
    at new tn (Chart.min.js:7:102287)
    at chart-pie-demo.js:7:18

this is the error but I dont even see the file source I tried incognito but same issue so I know its not preserved log any idea?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.