数据表显示条目和搜索功能不起作用

Question

我正在使用数据表，除了显示条目和搜索功能外，一切正常。 我似乎无法与它互动，它在那里，但我无法点击它。

这是表的代码和数据表的脚本

<div class="box-body table-responsive">
               <form action="assignment_update.php" class="form-horizontal" method="post" enctype="multipart/form-data">
                 <div class="panel-footer" align="center">
                <button class="btn btn-info" style="padding:12px;" type="submit" name="submit">&nbsp;&nbsp;&nbsp; <b>Add Assignments</b> &nbsp;&nbsp;&nbsp;</button>
              </div>
              <br/>
   <!-- DataTables Example -->
    <div class="card mb-3">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
            <thead>
              <tr>
                <th>ID</th>
                <th>Assignment Name</th>
                <th>Assignment File</th>
                <th>Upload Date</th>
              </tr>
            </thead>
            <tbody>
           <!--Fetch-->
          <?php

          include("connection.php");

          $query = mysqli_query($connect, "SELECT assignment_id, assignment_title, assignment_file, assignment_upload_date FROM cms_assignment");

           while($result = mysqli_fetch_array($query)){

            echo "<tr>
            <td>".$result['assignment_id']."</td>
            <td>".$result['assignment_title']."</td>
            <td>".$result['assignment_file']."</td>
            <td>".$result['assignment_upload_date']."</td>
            </tr>";

           }

          ?>


            </tbody>
          </table>
            <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

          <script type="text/javascript">

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

          </script>


            </tbody>
          </table>
        </div>
      </div>

    </div>

任何人都可以告诉我有什么问题或应该添加什么才能使它们工作？ 任何帮助，将不胜感激！

Answer 1

在数据表脚本上方添加 JQuery。 它应该看起来像下面的片段。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

不要忘记在<head>...</head>添加 datatables css

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

参考： https : //datatables.net/examples/data_sources/dom.html