Dynamic columns php, mysql and DataTables

Question

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>

you need datatables.js file too. Otherwise you can't get its features. Why dont you check the website for the documentation — Rotimi
– Rotimi, Commented Oct 9, 2017 at 3:07
and anyway, did you close tag for the script? something like this </script> — Jacky Supit
– Jacky Supit, Commented Oct 9, 2017 at 3:09

Kevin HR · Accepted Answer · 2017-10-09 03:51:23Z

1

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>

answered Oct 9, 2017 at 3:51

Kevin HR

2491 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

macunte Over a year ago

Thanks Kevin HR, I had just added that in the order that you present and all began to display as expected. I had left off a closing script tag at the bottom as well like Jacky Supit caught.

Collectives™ on Stack Overflow

Dynamic columns php, mysql and DataTables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related