使用动态数据时，搜索和分页功能在 DataTable 中不起作用

Question

我做了一个表格，我一直在使用Datatable CDN来拥有一些功能，例如搜索和选择表格页面的能力。遵循 DataTables 上的步骤后，我的代码使用搜索栏和页面加载我的表，但是所有功能都不起作用。谁能告诉我我在哪里做错了：

使用静态数据使 dataTable 可以按预期工作，搜索选项和分页工作并显示表中的结果。然而，当使用 MySQL 数据库的动态数据时，搜索和分页功能停止工作。下面是我的代码，它从我的数据库中从表雇员中获取数据：

<?php
     global $db;
     $sql = "SELECT id, name, role, competency FROM employees";
     $result = mysqli_query($db, $sql);
?>

这个查询是在我的 html 代码中的表格之前找到的，所有数据都正确显示并且 dataTable 的样式也显示了，但是搜索和分页功能不起作用。搜索返回 No Match 结果，但记录存在于表中。谁能告诉我错误。

<table id="Data_Table" width="100%">
  <thead>
     <tr>
       <td>ID</td>
       <td>Employee Name</td>
       <td>Job Role</td>
       <td>Competency Level</td>
       <td>Action</td>
     </tr>
   </thead>
       <?php 
           if (mysqli_num_rows($result) > 0) {
           foreach($result as $row) {
       ?>
       <tbody>
          <tr>
             <form method="post">
               <td><?php echo $row['id']; ?></td>
               <td><?php echo $row['name']; ?></td>
               <td><?php echo $row['role']; ?></td>
               <td><?php echo $row['competency']; ?></td>
               <td>
                   <button type="button" class="view_emp" title="View Record">
                   <span class="la la-eye"></span> View
                   </button>
                   <button type="button" class="edit_emp" title="Update Record">
                   <span class="la la-edit"></span>Update
                   </button>
                   <input type="checkbox" name="keyToDelete" value="<?php echo $row['id']; ?>" required>
                    <button type="submit" name="delete_employee" class="delete_employee" title="Delete Record"><span class="la la-trash"></span>Delete
                    </button>
                 </td>
               </form>
          </tr>
     </tbody>
     <?php
          }
        }                                                            
        else {
              echo "No Employee Record could be found";
             }

         $db-> close();
      ?>
</table>

在我的代码中，我还包含了将使用 DataTables 的脚本，如下所示：

<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

以及数据表的样式链接

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">

所有样式都按预期工作，但搜索和分页等功能不起作用，谁能告诉我我在这里做错了什么

我在脚本中定义了如下数据表：

 <script>
    $(document).ready(function(){ 
        $('#Data_Table').DataTable(); 
    });                           
</script>

浏览器的控制台日志中没有错误，功能搜索和分页根本不起作用，搜索选项将搜索并返回结果为 No match with records 当有记录并且 $results 是从我的数据库中获取的数据员工例如：id：1，姓名：Bob，角色：网页设计师，能力：初学者。

Answer 1

为了使用DataTables，你需要初始化一个

$(document).ready( function () {
   $('#Data_Table').DataTable();
});

这需要被包裹在一个脚本标签中

我在你的代码中没有看到它

另外，你在第 18 行错过了一个 td 结束标记

这是一个工作示例：jsfiddle.net

来源：datatables.net