Edit: typos removed, datatables library is working and is applied to table, however the responsive extension (now added with cdn) isn’t working when scaling the window to mobile sizes.
I’m a beginner with datatables and I’m trying to convert my table so that it can be responsive. Initially I got an error which meant I had to add thead and tbody tags, however now I’m getting an internal server error.
<?php
if(!$_SESSION['loggedin']){
//User is not logged in
echo "<h1>Access Denied</h1>";
echo "<script> window.location.assign('index.php?p=login'); </script>";
exit;
}
?>
<div class="card container mt-5">
<div class="card-body">
<br><h1 id="RemoveScorecard">Your scorecards:</h1>
<ul id="scoreTable">
<?php
echo "<table id='scorecards' border='1' style='width:90%;'>
<thead>
<tr>
<th>Scorecard <br>(click number to delete scorecard)</th>
<th>Hole 1</th>
<th>Hole 2</th>
<th>Hole 3</th>
<th>Hole 4</th>
<th>Hole 5</th>
<th>Hole 6</th>
<th>Hole 7</th>
<th>Hole 8</th>
<th>Hole 9</th>
<th>Hole 10</th>
<th>Hole 11</th>
<th>Hole 12</th>
<th>Hole 13</th>
<th>Hole 14</th>
<th>Hole 15</th>
<th>Hole 16</th>
<th>Hole 17</th>
<th>Hole 18</th>
<th>Account number</th>
<th>Delete?</th>
</tr>
</thead>";
$query = "SELECT * FROM scorecards WHERE user_id = :userid";
$result = $DBH->prepare($query);
$result->bindParam(':userid', $_SESSION['userData']['user_id']);
$result->execute();
while($row = $result->fetch(PDO::FETCH_ASSOC)) {
echo "<tbody>";
echo "<tr>";
echo "<td style='text-align:center;'>" . $row['scorecard_id']. "</td>";
echo "<td>" . $row['place_1_name']. "</td>";
echo "<td>" . $row['place_2_name']. "</td>";
echo "<td>" . $row['place_3_name']. "</td>";
echo "<td>" . $row['place_4_name']. "</td>";
echo "<td>" . $row['place_5_name']. "</td>";
echo "<td>" . $row['place_6_name']. "</td>";
echo "<td>" . $row['place_7_name']. "</td>";
echo "<td>" . $row['place_8_name']. "</td>";
echo "<td>" . $row['place_9_name']. "</td>";
echo "<td>" . $row['place_10_name']. "</td>";
echo "<td>" . $row['place_11_name']. "</td>";
echo "<td>" . $row['place_12_name']. "</td>";
echo "<td>" . $row['place_13_name']. "</td>";
echo "<td>" . $row['place_14_name']. "</td>";
echo "<td>" . $row['place_15_name']. "</td>";
echo "<td>" . $row['place_16_name']. "</td>";
echo "<td>" . $row['place_17_name']. "</td>";
echo "<td>" . $row['place_18_name']. "</td>";
echo "<td>" . $row['user_id']. "</td>";
echo "<td>Delete</td>";
echo "</tr>";
echo "</tbody>";
}
echo "</table>";
?>
</ul>
</div>
</div>
<script>
$('#scorecards').DataTable({
responsive: true
});
</script>
<script src="./js/remove.js"></script>
<a href="index.php">Back to homepage</a>
Its hosted with plesk if that helps at all, although the error log file isn’t showing anything.
I’m using a php template for the header which includes the cdn for datatables.
Thanks for any help!
2
Answers
This line is missing a semicolon:
echo "<tbody>"
And this line has a
>
instead of a semicolon:echo "</tbody>">
Those will cause fatal PHP errors, which can show up as "Internal Server Error" depending on the error handling settings.
I use a config object for my tables, you should write CSS rules to the classes you assign to your columns, that way you can control your table via media queries
also useful but completely unrelated, you could try this format