DataTable无法应用于表

时间:2018-11-08 14:38:06

标签: php jquery datatables

我正在尝试使用DataTables,但是由于某种原因,它似乎无法正常工作。我正在使用Bootstrap 4,并且需要DataTables中的按钮,以便以后可以导出该表。我想我已经添加了所有我需要的东西,但是没有显示出来。有人知道为什么它没有用吗?该表是从数据库中发布的,它在引导程序中可以正常工作,并且所有信息都可以显示出来,但是当我尝试向其中添加DataTables时,似乎一切都没有改变。

 <?php 
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);

    include_once('connection.php');
    if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['someAction']))
        {
            func();
        }
        function func()
        {
          $conn = mysqli_connect("localhost", "root", "", "SportsDB");
        }
    session_start();
    if( !isset($_SESSION['username']) ){ /* Change into role = teacher or admin*/
      header('Location:login.php');
    }

    print_r($_SESSION);
    ?>

    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset="UTF-8">
      <title>Register exporting</title>
      <!--- Link to Bootstrap 4 -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
      <!-- Link to Data Tables -->
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.css"/>

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
      <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-flash-1.5.4/b-html5-1.5.4/datatables.min.js"></script>

      <!-- Link to jquery -->
      <script
      src="http://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>

    </head>
    <body>
      <div class='container-fluid' style='margin-top: 20px'>
        <div class="row">
          <div class="col-md-8 mx-auto">
            <table class="table table-bordered table-hover" id='example'>
              <thead>
                <tr>
                  <td>ID</td>
                  <td>Username</td>
                  <td>T1_choice</td>
                  <td>T2_choice</td>
                  <td>T3_choice</td>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <td>ID</td>
                  <td>Username</td>
                  <td>T1_choice</td>
                  <td>T2_choice</td>
                  <td>T3_choice</td>
                </tr>
              </tfoot>
              <tbody>
                <?php
                  ini_set("display_errors", 1);
                  $stmt = $conn->query('SELECT * FROM Student_Choices');
                  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                    echo '<tr>
                        <td>'.$row['Unique_ID'].'</td>
                        <td>'.$row['Username'].'</td>
                        <td>'.$row['T1_Choice'].'</td>
                        <td>'.$row['T2_Choice'].'</td>
                        <td>'.$row['T3_Choice'].'</td>
                      </tr>
                    ';
                  }
                ?>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#example').DataTable();
      } );
    </script>
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

感谢您的帮助。我需要在DataTables之前调用jquery。