php - Jquery (Datatables) 功能没有完全初始化? PHP/MySQL

标签 php jquery html mysql css

我正在尝试应用 Jquery 的数据表来显示我的数据库。在此链接中的示例中,该表是可搜索的,可以订购的,并且具有很好的分色。

http://www.datatables.net/examples/basic_init/zero_configuration.html

我当前的代码显示数据,但没有排序功能,没有搜索选项,只有原始数据、粗体标题和分隔行的条(没有示例中的交替颜色)。带有垃圾数据的图片:css fail

它似乎应用了一些 css 但不是全部?我不明白为什么缺少功能和剩余样式。我返回并从我的最后一个代码中放入 html 结构,结果相同并且没有抛出任何错误。

代码:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT Sid, Fname, Lname, Email, Dtype, Mac, Date FROM StudentDeviceReg";
$result = $conn->query($sql);
?>
<!Doctype html>
<html>
    <head>
        <title>DataTables</title>
        <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


        <script src="media/js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>

        <style type="text/css">
            @import "media/css/jquery.dataTables.css";
        </style>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
            $('#datatables').dataTable();
            })
        </script>
    </head>
    <body>
        <div>
            <thead>

<?php

if ($result->num_rows > 0) {
    echo "<table id='datatables' class='display'>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Device</th>
        <th>Mac Address</th>
        <th>Date</th>
    </tr>";
?>

            </thead>
            <tbody>

<?php


    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr>
        <td>".$row["Sid"]."</td>
        <td>".$row["Fname"]."</td>
        <td>".$row["Lname"]."</td>
        <td>".$row["Email"]."</td>
        <td>".$row["Dtype"]."</td>
        <td>".$row["Mac"]."</td>
        <td>".$row["Date"]."</td>
          </tr>";
    }
    echo "</table>";


} else {
    echo "0 results";
}
$conn->close();
?>
            </tbody>
        </div>
    </body>
</html>

最佳答案

您的表格树结构不正确。

<body>
<div>

<?php

 if ($result->num_rows > 0) {
   echo "
   <table id='datatables' class='display'>
    <thead>
      <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Device</th>
        <th>Mac Address</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>";

    while($row = $result->fetch_assoc()) {
     echo "
      <tr>
        <td>".$row["Sid"]."</td>
        <td>".$row["Fname"]."</td>
        <td>".$row["Lname"]."</td>
        <td>".$row["Email"]."</td>
        <td>".$row["Dtype"]."</td>
        <td>".$row["Mac"]."</td>
        <td>".$row["Date"]."</td>
      </tr>";
    }
    echo "
    <tbody>
   </table>";
 }

?>

</div>
</body>

关于php - Jquery (Datatables) 功能没有完全初始化? PHP/MySQL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28200129/

相关文章:

javascript - 从左到右滑动多个div

javascript - HTML 弹出窗口修复

javascript - 为什么重定向后页面跳转?

php - 调整注销功能以处理 Safari 后退按钮问题

php mysql解析json utf-8编码问题

JavaScript 跳过 AJAX Post

php - PHP 逐行读取时可以排除换行符吗?

javascript - 如何打开新的浏览器窗口(不是选项卡),然后使用 jQuery/Javascript 调整它的大小

jquery,溢出时获取div宽度: hidden;

javascript - 使用带有 inject = true 的 HtmlWebpackPlugin 不会缩小 ES6 代码