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

问题描述

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

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

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

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

我在脚本中定义了 DataTables，如下所示：

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

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

标签： javascripthtmljquerydatatabledatatables

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

问题描述

解决方案

推荐阅读