Jquery (Datatables) features not fully initializing? php/mysql

799

I am attempting to apply Jquery's Datatables to display my database. In the example featured in this link, the table is searchable, can be ordered, and has nice color seperation.

http://www.datatables.net/examples/basic_init/zero_configuration.html

My current code displays the data, but with no sorting functionality, no search option, just the raw data, bold titles, and bars separating the rows (no alternating colors as in the example.) Pic with junk data: css fail

It seems it is applying some of the css but not all? I'm lost on why the functionality and remaining style is missing. I went back and put in html structure from my last code with the same results and no errors thrown.

Code:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT Sid, Fname, Lname, Email, Dtype, Mac, Date FROM StudentDeviceReg";
$result = $conn->query($sql);
?>
<!Doctype html>
<html>
    <head>
        <title>DataTables</title>
        <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


        <script src="media/js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>

        <style type="text/css">
            @import "media/css/jquery.dataTables.css";
        </style>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
            $('#datatables').dataTable();
            })
        </script>
    </head>
    <body>
        <div>
            <thead>

<?php

if ($result->num_rows > 0) {
    echo "<table id='datatables' class='display'>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Device</th>
        <th>Mac Address</th>
        <th>Date</th>
    </tr>";
?>

            </thead>
            <tbody>

<?php


    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr>
        <td>".$row["Sid"]."</td>
        <td>".$row["Fname"]."</td>
        <td>".$row["Lname"]."</td>
        <td>".$row["Email"]."</td>
        <td>".$row["Dtype"]."</td>
        <td>".$row["Mac"]."</td>
        <td>".$row["Date"]."</td>
          </tr>";
    }
    echo "</table>";


} else {
    echo "0 results";
}
$conn->close();
?>
            </tbody>
        </div>
    </body>
</html>
373

Answer

Solution:

Your table tree is not structured properly.

<body>
<div>

<?php

 if ($result->num_rows > 0) {
   echo "
   <table id='datatables' class='display'>
    <thead>
      <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Device</th>
        <th>Mac Address</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>";

    while($row = $result->fetch_assoc()) {
     echo "
      <tr>
        <td>".$row["Sid"]."</td>
        <td>".$row["Fname"]."</td>
        <td>".$row["Lname"]."</td>
        <td>".$row["Email"]."</td>
        <td>".$row["Dtype"]."</td>
        <td>".$row["Mac"]."</td>
        <td>".$row["Date"]."</td>
      </tr>";
    }
    echo "
    <tbody>
   </table>";
 }

?>

</div>
</body>

People are also looking for solutions to the problem: php - How to properly LEFT JOIN users with transactions

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.