Dynamic columns php, mysql and DataTables

I have tried the following code but can't seem to get the DataTables feature to appear. All I am seeing is my data in a borderless static table.

Could someone tell me what is wrong with my code? I would like to use the CDN hosts for css and javascript. Do I need to have a local .js file as well?

<!DOCTYPE html>
<html>
<head>
    <title>Mobile Apps</title>


    <link  href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">              
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

<table id="mobileapp">
    <thead>
        <th>Trans ID</th>
        <th>App Date</th>
        <th>Name</th>
        <th>City State Zip</th>
    </thead>
    <tbody>
        <!-- Fetch from Db  -->

        <?php
            $db_host = 'serverA'; // Server Name
            $db_user = 'root'; // Username
            $db_pass = ''; // Password
            $db_name = 'mrd_log'; // Database Name
            //connect to database
            $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

            //database connection error check
            if (!$conn) {
                die ('Failed to connect to MySQL: ' . mysqli_connect_error());  
            }

//SQL data query to retrieve data
            $sql = "SELECT registration.tran_id, registration.application_date, registration.name1, registration.cityline1 FROM registration WHERE registration.application_date < curdate()";

//Assign results to variable        
            $query = mysqli_query($conn, $sql);

            while ($result = mysqli_fetch_array($query)) {

            echo "<tr>
                <td>".$result['tran_id']."</td>
                <td>".$result['application_date']."</td>
                <td>".$result['name1']."</td>
                <td>".$result['cityline1']."</td>
            </tr>";
                }
            ?>
    </tbody>
</table>    


        <script type="text/javascript">
            $(document).ready(function(){
                $('#mobileapp').DataTable();
            });

</body>

</html>

Include the DataTable JS library in the HTML head:

<link  href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">              
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

0 Comment

NO COMMENTS

LEAVE A REPLY

Captcha image