MySQL

Bootstrap Data Table

Zoekresultaten weergeven in een Bootstrap Data Table
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">
<title>Demo Table</title>
<style>
.demo-container {
margin: auto;
width: 80%;
max-width: 1200px;
}
</style>
</head>
<body>
<div class="demo-container">
<?php
$conn = new mysqli ("server", "user", "password", "database");
$sql = "SELECT * FROM top_5000_songs WHERE list_eu > 21.000 ORDER BY year ASC";
$result = $conn -> query($sql);
echo "<table width='100%' id='top-5000-songs' class='table table-striped table-bordered dt-responsive nowrap'>";
echo "<thead>";
echo "<tr>";
echo "<th>Song</th>";
echo "<th>Artist</th>";
echo "<th>Year</th>";
echo "</tr>";
echo "</tbody>";
echo "<tbody>";
while ($row = $result -> fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["song"] . "</td>";
echo "<td>" . $row["artist"] . "</td>";
echo "<td>" . $row["year"] . "</td>";
}
echo "</tr>";
echo "</tbody>";
echo "</table>";
$conn -> close();
?>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
<script>
$("#top-5000-songs").DataTable({
language: { 
search: "",
searchPlaceholder: "Zoeken...",
paginate: {
next: 'Volgende »',
previous: '« Vorige '
}
},
paging: true,
searching: true,
responsive: true,
pageLength: 5,
bLengthChange: false,
bInfo: false,
bSort: true,
}); 
</script>
</body>
</html>

MySQL and PHP Lessons for Beginners

Display Search Results in a Bootstrap Data Table