当我填充表格时，JavaScript停止工作

Question

编辑：我自己弄清楚了，将按照系统规定在24小时内接受我自己的答案。

我正在使用以下方法引导程序： https : //github.com/BlackrockDigital/startbootstrap-sb-admin

我对此还比较陌生，我只是从玩弄这样的代码中学习，所以如果有人指出我在问题之外也犯了任何错误，我也将不胜感激。

我正在尝试将其合并到我现有的php代码中，该代码从数据库中获取数据，然后循环以填充表。 问题是当我玩桌子时，它突然失去了tables.html示例中的一些功能：

   1. Sorting a column either by ascending/descending order by clicking the column header. 
   2. Small search bar for the table. 
   3. Pagination and filtering of number of entries displayed per page.

我清空表并将tbody空间留空，所有功能再次出现。 因此，我尝试使用它附带的示例数据，而不是我自己的示例数据，但是所有功能都像我的php代码一样消失了。 我不知道自己缺少什么或违反了什么规则。

另外，由于它也可能是问题的根源，因此上面链接中的示例是.html文件，而我的示例是.php 。 我以为这不是什么大问题，我不知道这是否真的是一个问题，只是把它放在那里以防万一。

除非有人要求，否则我不会发布所有代码，因为这会很长。 我已经为它设置了所有必需的链接和脚本，或者至少我相信我这样做了，因为它在空白时有效，但在尝试填充tbody区域时无效。

这是带有我的php代码的表：

<!-- Table -->
<div class="card mb-3">
    <div class="card-header">
      <i class="fa fa-table"></i> Data Table Example</div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>#</th>
              <th>Title</th>
              <th>Authors</th>
              <th>ISBN</th>
              <th>Dewey-Decimal Classification</th>
              <th colspan = "2" align = "center">Actions</th>
            </tr>
          </thead>
          <tbody>
            <?php

              $query = "SELECT b.BookID, b.Book_Title, GROUP_CONCAT(a.Author_Name SEPARATOR ', ') AS Authors, b.Book_ISBN, c.CategoryID, c.CategoryClass
              FROM Book b 
                  INNER JOIN book_author ba
                  ON b.BookID = ba.BookID
                  INNER JOIN Author a
                  ON ba.AuthorID = a.AuthorID
                  INNER JOIN enum_category c
                  ON b.Book_CategoryID = c.CategoryID
              GROUP BY b.BookID";  

              $crud->book_dataview($query);
            ?>
          </tbody>
        </table>
      </div> <!-- table-responsive -->
    </div> <!-- card-body -->
        <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
    </div> <!-- card-header -->  
</div> <!-- card mb-3 -->

这是我拥有的book_dataview（）函数：

public function book_dataview($query)
{
    $query = $this->db->prepare($query);
    $query->execute();

    if($query->rowCount()>0)
    {
        while($row=$query->fetch(PDO::FETCH_ASSOC))
        {
            ?>
            <tr>
                <td><?php print($row['BookID']); ?></td>
                <td><?php print($row['Book_Title']); ?></td>
                <td><?php print($row['Authors']); ?></td>
                <td><?php print($row['Book_ISBN']); ?></td>
                <td><?php print($row['CategoryID']." - ".$row['CategoryClass']); ?></td>
                <td align="center">
                    <a href="edit-data-book.php?edit_id=<?php print($row['BookID']); ?>"><i class="glyphicon glyphicon-edit"></i></a>
                </td>
                <td align="center">
                    <a href="delete-book.php?delete_id=<?php print($row['BookID']); ?>"><i class="glyphicon glyphicon-remove-circle"></i></a>
                </td>
            </tr>
            <?php
        }
    }
    else
    {
        ?>
        <tr>
        <td>Nothing here...</td>
        </tr>
        <?php
    }

}

至于.js文件，我不确定完全使用哪个文件，我想是这样的：

startbootstrap-sb-admin / vendor / datatables / jquery.dataTables.js

我会在这里发布代码，但是总共有15,000行，我不确定需要发布哪些代码，因为我什至不确定自己，因为我仍在学习。 谢谢。

Answer 1

似乎是我的列设置之一导致了此问题。 特别：

<th colspan = "2" align = "center">Actions</th>

这很可能引起脚本调整列大小的问题，这也可以解释为什么表格的两边没有边框。 我对其进行了更改，只是将其分成几列，而不是将两件事强制成为一列。 问题解决了。

Answer 2

为了使dataTables正常工作，您需要尊重HTML表结构

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

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script> <table id="datatable"> <thead> <tr> <th>Id</th> <th>Title</th> <th>Authors</th> </tr> </thead> <tbody> <tr> <td>52</td> <td>Lorem ipsum</td> <td>Author 1</td> </tr> <tr> <td>95</td> <td>Sit dulur amet</td> <td>Tokyo</td> </tr> </tbody> <table>