dataTables显示条目和搜索功能不起作用

问题描述 投票：0回答：1

我使用的是dataTable，除显示条目和搜索功能外，其他一切正常。我似乎无法与它进行交互，它在那里，但是我无法单击它。enter image description here

这是表的代码和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>

有人可以告诉我什么地方出了问题或应该添加些什么才能使他们起作用？任何帮助，将不胜感激！

javascript datatables datatables-1.10
1个回答
0
投票

在数据表脚本上方添加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>内也添加数据表css

<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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.