Adding datatables to a table (wordpress) - php

Question

I'm trying to add datatables to my project and it shows up with the arrows and the search bar, but neither work.
I tried testing the code on a page with just the scripts and table and it worked but when I moved it to my wordpress site I run into problems.
Any suggestions? I have the jquery and datatables scripts and css in the header page, as well as the script for the table itself after the /head:
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
My table itself looks like
echo "<table id='myTable' class='display table' width='100%'>";
echo "<thead>";
echo "<tr>";
echo "<th>Foster ID</th>";
echo "<th>Foster's Name</th>";
echo "<th>City</th>";
echo "<th>E-Mail</th>";
echo "</tr>";
echo "</thead>";
if(!empty($result)){
foreach ($result as $results){
$fosterId = $results->memberId;
$fosterName = $results->memberName;
$city = $results->city;
$email = $results->email;
echo "<tbody>";
echo "<tr>";
echo "<td>$fosterId</td>";
echo "<td>$fosterName</td>";
echo "<td>$city</td>";
echo "<td>$email</td>";
echo "</tr>";
}
} else {
echo "<tr>";
echo "<td colspan='5'>No Fosters</td>";
echo "<tr>";
echo "</tbody>";
}
echo "</table>";

Answer 1

Your PHP code contains tbody element in the loop. Also DataTables doesn't support colspan attribute in table body.
Corrected PHP code:
echo "<table id='myTable' class='display table' width='100%'>";
echo "<thead>";
echo "<tr>";
echo "<th>Foster ID</th>";
echo "<th>Foster's Name</th>";
echo "<th>City</th>";
echo "<th>E-Mail</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach ($result as $results){
$fosterId = $results->memberId;
$fosterName = $results->memberName;
$city = $results->city;
$email = $results->email;
echo "<tr>";
echo "<td>$fosterId</td>";
echo "<td>$fosterName</td>";
echo "<td>$city</td>";
echo "<td>$email</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
Corrected JavaScript code:
$(document).ready(function(){
$('#myTable').DataTable({
"language": {
"emptyTable": "No Fosters"
}
});
});