当我填充表格时，Javascript 停止工作答案

【问题标题】：Javascript stops working when I populate the table当我填充表格时，Javascript 停止工作
【发布时间】：2018-03-27 16:55:45
【问题描述】：

编辑：我自己想通了，会根据系统规定在 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

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

【问题讨论】：

为什么不想尝试使用 DataTable API？你可以用它很容易地填充表格

标签： javascript php html bootstrap-4

【解决方案1】：

似乎是我的列设置之一导致了该问题。具体来说：

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

这很可能导致调整列大小的脚本出现问题，这也可以解释为什么表格的两侧没有边框。我改变了它，只是制作了单独的列，而不是将两件事合二为一。问题解决了。

【讨论】：