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

Question

EDIT: I've figured it out myself, will accept my own answer in 24 hours as per the systems regulations.

I'm toying around with bootstrap using this: https://github.com/BlackrockDigital/startbootstrap-sb-admin

I'm relatively new to this and I'm just learning from toying around with codes like this so I'd also appreciate it if anyone pointed any mistakes I'm making aside from the question as well.

I'm trying to incorporate it into an existing php code that I have that grabs data from the database and just loops to populate a table. Problem is when I played around with the table it suddenly lost a few of the functions it had in the tables.html example:

   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.

I emptied the table and left the tbody space blank and all the functions appeared again. So I tried using the sample data that it came with instead of my own but the functions all disappeared just like with my php code. I don't know what I'm missing or what rule I'm breaking.

Also since it might also be the root of the problem, the examples in the link above are .html files whereas mine are in .php . I assumed it wasn't much of an issue, I don't know if that's actually a problem but just putting it out there in case it is.

I'm not posting the whole of the codes unless someone asks for it because it'll be very long. I've setup all the necessary links and scripts for it, or at least I believe I did because it works when it's blank but not when I try to populate the tbody area.

This is the table with my php code in it:

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

and this is the book_dataview() function I have:

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
    }

}

As for the .js file I'm not entirely sure which it actually uses, my guess is it's this:

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

I would post the code here but it's 15k lines in total and I'm not sure which ones need to be posted since I'm not even sure myself since I'm still learning as I go. Thanks.

Answer 1

It seems one of my column settings caused the issue. Specifically:

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

It most likely caused issues with the script to adjust column size which would also explain why the table was border-less on the sides. I changed it and just made separate columns instead of forcing two things into one. Problem solved.

Answer 2

To make dataTables working, you need to respect HTML table structure

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