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-管理员/供应商/数据表/ jquery.dataTables.js

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

Answer 1

似乎我的一个列设置导致了这个问题。具体来说：

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

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

Answer 2

要使dataTable正常工作，您需要尊重HTML表格结构

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我填充表

2 个答案: