<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<?php
  $conn = new mysqli ('server', 'user', 'password', 'database');
  mysqli_set_charset ($conn, 'utf8');

if ($conn -> connect_error) {
  die ('Connection failed: ' . $conn->connect_error);
  } 

$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_title'] . '</td>';
  echo '<td>' . $row['artist'] . '</td>';
  echo '</tr>';
  }
  
  echo '</tbody>';
  echo '</table>';
  $conn -> close();
  ?>

<div class="table-responsive">
  <table class="table table-striped"> 

    <!-- Table content goes here -->

  </table>
</div>

<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>