MySQL

Display records in a Bootstrap table

Display MySQL data in a Bootstrap table

This example demonstrates how to display MySQL data in a Bootstrap table in a simple and structured way:

YearSong TitleArtist
2005DareGorillaz
1987So EmotionalWhitney Houston
1967Penny LaneThe Beatles
1995Free As a BirdThe Beatles
2001SurvivorDestiny's Child
2005Inside Your HeavenCarrie Underwood
1982I Love Rock 'n' RollJoan Jett & The Blackhearts
1990Thieves in the TemplePrince
2001Miss CaliforniaDante Thomas
1992Jump AroundHouse of Pain
2000Case Of The Ex (Whatcha Gonna Do)Mya
2001OverloadThe Sugababes
2004I Don't Wanna KnowMario Winans
1997Samba De JaneiroBellini
1972Telegram SamT Rex
1980Sexy EyesDr Hook
1963Deep PurpleNino Tempo & April Stevens
1957Yes Tonight JosephineJohnnie Ray
1975Island GirlElton John
1971Joy to the WorldThree Dog Night
2003Shut UpThe Black Eyed Peas
1945Chickery ChickSammy Kaye
1953PretendNat King Cole
1986The Next Time I FallPeter Cetera & Amy Grant
1991Cry For HelpRick Astley
1987I Still Haven't Found What I'm Looking ForU2
1963Surf CityJan & Dean
1969DizzyTommy Roe
1949Forever & EverRuss Morgan
1977We're All AloneRita Coolidge
1938A-Tisket A-TasketElla Fitzgerald
1985There Must Be an Angel (Playing With My Heart)The Eurythmics
2006Me & UCassie
1945It's Been a Long, Long TimeHarry James
1993DreamsGabrielle
1948Little White LiesDick Haymes
2009BreakevenThe Script
1956Just Walkin' in the RainJohnnie Ray
1974Rebel RebelDavid Bowie
1976ShannonHenry Gross
1966Bend ItDave Dee, Dozy, Beaky, Mick & Tich
1990KillerAdamski
1950Rag MopThe Ames Brothers
1983It's Raining MenThe Weather Girls
1954Shake, Rattle & RollBill Haley & his Comets
1995If You Love MeBrownstone
2002Gimme the LightSean Paul
1976In ZaireJohnny Wakelin
2007Hate That I Love YouRihanna
2001PopN Sync
1989What I AmEdie Brickell & The New Bohemians
1913When Irish Eyes Are SmilingChauncy Olcott
1990Everybody EverybodyBlack Box
1986Something About YouLevel 42
1962Sealed With a KissBrian Hyland
1981AbacabGenesis
2002Work ItMissy 'Misdemeanor' Elliott
1984Still Loving YouThe Scorpions
1995Have You Ever Really Loved a Woman?Bryan Adams
1984Sad Songs (Say So Much)Elton John
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">
<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
<?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();
  ?>

Responsive Design (Optional)

If you want the table to be responsive, meaning it will adapt to smaller screens, wrap the <table> inside a .table-responsive class:

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

    <!-- Table content goes here -->

  </table>
</div>
Table Custom Settings with jQuery
<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>