我已经包含了数据表cdn，但它不起作用答案

【问题标题】：I have included datatables cdn but it is not working我已经包含了数据表cdn，但它不起作用
【发布时间】：2021-08-18 09:24:48
【问题描述】：

我只创建了一个文件 index.php

在标题部分我包含了来自 datatables.net 的 CSS 链接

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">


<title>Crud application</title>
</head>

我已在正文部分中将 id 作为表格给出

<table class="table" id="mytable">
  <thead>
    <tr>
      <th scope="col">Sno</th>
      <th scope="col">Title</th>
      <th scope="col">Descriptioin</th>
      <th scope="col">Action</th>
    </tr>
  </thead>

我已经包含了来自 datables.net 的 JS CDN 以及 body 标签末尾的函数

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>
</body>

但表格显示如 datatables.net 中所示。控制台中没有错误。
完整代码

<?php
//INSERT INTO `note` (`sno`, `title`, `description`, `tstamp`) VALUES (NULL, 'Buy fruits', 'buy fruits now', current_timestamp());
    
     $insert = false;
     $server = "localhost";
     $user = "root";
     $password = "";
     $dbase = "notes";

     // create a connection
     $conn = mysqli_connect($server, $user, $password, $dbase);

     // die connection if not connected 
     if(!$conn){
       die("sorry connection not established".mysqli_connect_error());
     }
// updating the database 
      if($_SERVER['REQUEST_METHOD'] == 'POST'){
         $title = $_POST['title'];
         $description = $_POST['description'];
     } 
     global $title; global $description;
// adding the query
     $sqld = "INSERT INTO `note` (`title`, `description`) VALUES ('$title', '$description')";
     $resultd = mysqli_query($conn, $sqld);
// checking the query wether updated
    if($resultd){
      //echo "success";
      $insert = true;
    }
    else{
      echo "not success". mysqli_connect_error();
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">


<title>Crud application</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">PHP Crud</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact us</a>
              </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <?php
       if($insert){
         echo"<div class='alert alert-success alert-dismissible fade show' role='alert'>
         <strong>Success</strong> your notes submitted successfully.
         <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
           <span aria-hidden='true'>&times;</span>
         </button>
       </div>";
       }
      ?>
<div class="container my-4">
    <form action="/crud/index.php" method="POST">
        <h2>Add a note</h2>
        <div class="form-group">
          <label for="title">Note title</label>
          <input type="text" class="form-control" id="title" name="title" aria-describedby="emailHelp" placeholder="note">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="description">note description</label>
            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
          </div>
        <button type="submit" class="btn btn-primary">Add note</button>
      </form>
</div>

<div class="container">
  <table class="table" id="mytable">
  <thead>
    <tr>
      <th scope="col">Sno</th>
      <th scope="col">Title</th>
      <th scope="col">Descriptioin</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
  <?php
    $sql = "SELECT * FROM `note`";
    $result = mysqli_query($conn, $sql);
    while($row = mysqli_fetch_assoc($result)){
      echo "<tr>
      <th scope='row'>". $row['sno']."</th>
      <td>". $row['title']."</td>
      <td>". $row['description']."</td>
      <td>Actions</td>
       </tr>";
    }
    ?>
  </tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>
</body>
</html>

6) 截图 screentshot of tables

【问题讨论】：

为了能够帮助您，请发布您上述所有步骤的完整代码。
我做了一个工作示例，看起来不错。表格中还没有任何数据，所以我不确定您希望看到什么...
搜索表和条目数未显示
警告：使用mysqli 时，您应该使用parameterized queries 和bind_param 将任何数据添加到您的查询中。请勿使用字符串插值或连接来完成此操作，因为您创建了严重的SQL injection bug。切勿将$_POST、$_GET 或任何类型的数据直接放入查询中，如果有人试图利用您的错误，这可能会非常有害。
注意：object-oriented interface to mysqli 明显不那么冗长，使代码更易于阅读和审核，并且不容易与过时的mysql_query 接口混淆，因为缺少单个i 会导致麻烦。使用这种风格：$db = new mysqli(…) 和 $db->prepare("…") 程序界面是 PHP 4 时代的产物，在新代码中使用时显得笨拙且不合适。

标签： javascript php jquery datatables cdn

【解决方案1】：

(1) 更改 $('#myTable').DataTable();到 $('#mytable').DataTable(); 这对我来说很好，并显示了我的搜索表

【讨论】：