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
2005SwitchWill Smith
1987Somewhere Out ThereLinda Ronstadt & James Ingram
1975Low RiderWar
1998Stand By Me4 The Cause
1992Sweat (A La La La La Song)Inner Circle
2004I Don't Wanna KnowMario Winans
2004Me, Myself & IBeyonce
2011Born This WayLady GaGa
1951Tennessee WaltzAnita O'Day
1971Reason to BelieveRod Stewart
1997Block Rockin' BeatsThe Chemical Brothers
1967Georgy GirlThe Seekers
1958La BambaRitchie Valens
1962The WandererDion
2007LovestonedJustin Timberlake
1980Sexy EyesDr Hook
2006PatienceTake That
1941StardustArtie Shaw
1965GoldfingerShirley Bassey
1974FreebirdLynyrd Skynyrd
1994DoopDoop
2004Slow JamzTwista
1984Original SinINXS
2007GlamorousFergie & Ludacris
1968White RoomCream
1992How Do You Do!Roxette
1998God is a DJFaithless
1976HurricaneBob Dylan
1982RosannaToto
1985Small TownJohn Cougar Mellencamp
1994AlwaysBon Jovi
1978Fool (If You Think It's Over)Chris Rea
1986West End GirlsThe Pet Shop Boys
1986Atlantis Is Calling (S.O.S. For Love)Modern Talking
2009Thinking of YouKaty Perry
1996Always Be My BabyMariah Carey
1965My GirlThe Temptations
1944Into Each Life Some Rain Must FallElla Fitzgerald & The Ink Spots
1978Follow You Follow MeGenesis
1961Tossing & TurningBobby Lewis
1976The Best Disco in TownRitchie Family
1987Whenever You Need SomebodyRick Astley
1980FashionDavid Bowie
1992End of the RoadBoyz II Men
1961Goodbye Cruel WorldJames Darren
1999Where My Girls At?702
1966It's a Man's Man's Man's WorldJames Brown
2002The Logical SongScooter
1969In the Year 2525 (Exordium & Terminus)Zager & Evans
2009Fire BurningSean Kingston
1993Mr WendalArrested Development
1960RamonaBlue Diamonds
1993I'd Do Anything For Love (But I Won't Do That)Meat Loaf
1988Man in the MirrorMichael Jackson
1955Learnin' the BluesFrank Sinatra
2002Cleanin' Out My ClosetEminem
1960Wonderful WorldSam Cooke
1972Daddy Don't You Walk So FastWayne Newton
1977Ain't Gonna Bump No More (With No Big Fat Woman)Joe Tex
1992Everything About YouUgly Kid Joe
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>