Jquery (Datatables) features not fully initializing? php/mysql
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:
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>
Answer
Solution:
Your table tree is not structured properly.