dataTables显示条目和搜索功能不起作用 [英] dataTables Show entries and Search function not working

问题描述

我正在使用dataTable，除了显示条目和搜索功能之外，其他所有功能都正常运行。我似乎无法与之交互，它在那里，但是我无法单击它。

I'm using a dataTable and everything works fine except for the show entries and the search function. I can't seem to interact with it, it's there but I can't click it.

这是表的代码和dataTables的脚本

This is the code for the table and the script for the dataTables

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

有人可以告诉我什么地方出错或应该添加些什么才能使它们工作？
任何帮助将不胜感激！

Can anybody tell me whats wrong or what should be added in order for them to work? Any help would be appreciated!

推荐答案

在datatables脚本上方添加JQuery。

Add JQuery above the datatables script. It's should look like below snippet.

<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>内也添加数据表css。 ...< / head>

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

ref： https://datatables.net/examples/data_sources/dom.html

这篇关于dataTables显示条目和搜索功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！