php - Javascript stops working when I populate the table

103

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 >
  <div >
   <i ></i> Data Table Example</div>
  <div >
   <div >
    <table 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 >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 ></i></a>
        </td>
        <td align="center">
          <a href="delete-book.php?delete_id=<?php print($row['BookID']); ?>"><i ></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.

733

Answer

Solution:

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.

People are also looking for solutions to the problem: mysql - Update row count in php mysqli not working when updating multiple query

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.