Question

我尝试过以下代码，但似乎无法显示DataTables功能。我所看到的只是无边界静态表格中的数据。

有人能告诉我我的代码有什么问题吗？我想使用CDN主机的CSS和JavaScript。我是否还需要一个本地的.js文件？

 <!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>

Answer 1

在HTML头中包含DataTable JS库：

<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>

动态列php，mysql和DataTables

1 个答案: