Link to Bootstrap CSS and JS Files
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
Link to Bootstrap dataTables CSS and JS Files
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
PHP
<?php
$conn = new mysqli ("server", "username", "password", "database-name");
mysqli_set_charset ($conn, "utf8");
$sql = "SELECT * FROM top_5000_songs ORDER BY RAND() LIMIT 0, 60";
$result = $conn -> query($sql);
echo "<table id=\"table-demo\" class=\"table table-striped\">";
echo "<thead>";
echo "<tr>";
echo "<th>Year</th>";
echo "<th>Song Title</th>";
echo "<th>Artist</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while ($row = $result -> fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["year"] . "</td>";
echo "<td>" . $row["song"] . "</td>";
echo "<td>" . $row["artist"] . "</td>";
}
echo "</tr>";
echo "</tbody>";
echo "</table>";
$conn -> close();
?>
JS
<script>
$(document).ready(function() {
$("#table-demo").DataTable({
paging: true,
pageLength: 4,
ordering: true,
info: false,
lengthChange: false,
language: {
search: "_INPUT_",
searchPlaceholder: "Search"
},
search: {
addClass: 'form-control input-lg col-xs-12',
},
});
});
</script>
