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

Posted 2023-05-09

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

【英文标题】：Search and Pagination Functions not working in DataTable when using Dynamic Data

【发布时间】：2021-09-24 06:24:03

【问题描述】：

我做了一个表格，我一直在使用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" >
  <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，角色：网页设计师，能力：初学者。

【问题讨论】：

向我们展示 (a) 定义 DataTable 的 <script>...</script> 标记的内容； (b) 来自$result 的一些样本数据； (c) 来自浏览器控制台的任何错误消息。

编辑显示已定义 DataTable 的脚本

【参考方案1】：

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

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

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

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

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

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

来源：datatables.net

【讨论】：

您好，我已经初始化了函数并将它的 id 放到了我的表格标签中，但它不起作用，没有它我将无法查看表格中的 dataTable 样式

可能是因为你在表单标签后面漏掉了一个 td 结束标签

我不这么认为，在最后一个 td 标签中找到的按钮已关闭，我只有 5 个 td 标签 -- 即使在第 18 行更正了该 td 标签，它仍然无法正常工作

我添加了一个 jsfiddle 示例，没有 php 逻辑，如果您查找不存在的内容，结果将消失并显示无匹配文本

我明白了，但是如果连接到数据库，结果将始终是不匹配文本，为什么会这样？