dataTables Show entries and Search function not working

问题

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.

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!

回答1:

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>

don't forget to add the datatables css too inside <head>...</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

来源：https://stackoverflow.com/questions/59121875/datatables-show-entries-and-search-function-not-working

标签

javascript

datatables

datatables-1.10