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
1963Bossa Nova BabyElvis Presley
1965Poupee De Cire, Poupee De SonFrance Gall
1971Mr BojanglesNitty Gritty Dirt Band
2012Too CloseAlex Clare
2008Love In This ClubUsher & Young Jeezy
1976Money HoneyThe Bay City Rollers
1932PleaseBing Crosby
1980More Than I Can SayLeo Sayer
1992Baby Got BackSir Mix-a-Lot
1969HairThe Cowsills
1950All My LovePatti Page
2008DangerousKardinal Offishall
1980You Shook Me All Night LongAC/DC
1988Endless Summer NightsRichard Marx
2004EverythingAlanis Morissette
1990Love Will Lead You BackTaylor Dayne
2000Lady (Hear Me Tonight)Modjo
1960Will You Love Me TomorrowThe Shirelles
1949Slippin' AroundMargaret Whiting & Jimmy Wakely
1972I GotchaJoe Tex
1992Rhythm is a DancerSnap
2002Objection (Tango)Shakira
1971My Sweet LordGeorge Harrison
1985Can't Fight This FeelingREO Speedwagon
2004Jesus WalksKanye West
1966Yellow SubmarineThe Beatles
1996How Deep is Your Love?Take That
1984The ReflexDuran Duran
1998Hard Knock LifeJay-Z
1992Am I the Same GirlSwing Out Sister
1976Dream WeaverGary Wright
2001StutterJoe Thomas & Mystikal
2006Not Ready To Make NiceThe Dixie Chicks
2008When I Grow UpThe Pussycat Dolls
1979Highway to HellAC/DC
1970See Me, Feel MeThe Who
1968CongratulationsCliff Richard
1998When You BelieveMariah Carey & Whitney Houston
1965The Last TimeThe Rolling Stones
1978Who Are You?The Who
1960I Want To Be Wanted (Per Tutta La Vita)Brenda Lee
1958It's Only Make BelieveConway Twitty
2011Just Can't Get EnoughThe Black Eyed Peas
1954I Need You NowEddie Fisher
1950Foggy Mountain BreakdownLester Flatt & Earl Scruggs
1981Keep On Loving YouREO Speedwagon
1997LovefoolThe Cardigans
1991SomedayMariah Carey
1991It Ain't Over 'till It's OverLenny Kravitz
2001Hanging by a MomentLifehouse
1942Don't Sit Under the Apple Tree (With Anyone Else But Me)Glenn Miller
1992JumpKris Kross
1951With These HandsNelson Eddy & Jo Stafford
1978Dancing in the CityMarshall Hain
1973Nutbush City LimitsIke & Tina Turner
1961Moon RiverHenry Mancini
1971For All We KnowThe Carpenters
1981Queen of HeartsJuice Newton
1978Too Much Too Little Too LateJohnny Mathis & Deniece Williams
1994Don't Turn AroundAce of Base
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>