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:
Year | Song Title | Artist |
---|---|---|
1963 | Bossa Nova Baby | Elvis Presley |
1965 | Poupee De Cire, Poupee De Son | France Gall |
1971 | Mr Bojangles | Nitty Gritty Dirt Band |
2012 | Too Close | Alex Clare |
2008 | Love In This Club | Usher & Young Jeezy |
1976 | Money Honey | The Bay City Rollers |
1932 | Please | Bing Crosby |
1980 | More Than I Can Say | Leo Sayer |
1992 | Baby Got Back | Sir Mix-a-Lot |
1969 | Hair | The Cowsills |
1950 | All My Love | Patti Page |
2008 | Dangerous | Kardinal Offishall |
1980 | You Shook Me All Night Long | AC/DC |
1988 | Endless Summer Nights | Richard Marx |
2004 | Everything | Alanis Morissette |
1990 | Love Will Lead You Back | Taylor Dayne |
2000 | Lady (Hear Me Tonight) | Modjo |
1960 | Will You Love Me Tomorrow | The Shirelles |
1949 | Slippin' Around | Margaret Whiting & Jimmy Wakely |
1972 | I Gotcha | Joe Tex |
1992 | Rhythm is a Dancer | Snap |
2002 | Objection (Tango) | Shakira |
1971 | My Sweet Lord | George Harrison |
1985 | Can't Fight This Feeling | REO Speedwagon |
2004 | Jesus Walks | Kanye West |
1966 | Yellow Submarine | The Beatles |
1996 | How Deep is Your Love? | Take That |
1984 | The Reflex | Duran Duran |
1998 | Hard Knock Life | Jay-Z |
1992 | Am I the Same Girl | Swing Out Sister |
1976 | Dream Weaver | Gary Wright |
2001 | Stutter | Joe Thomas & Mystikal |
2006 | Not Ready To Make Nice | The Dixie Chicks |
2008 | When I Grow Up | The Pussycat Dolls |
1979 | Highway to Hell | AC/DC |
1970 | See Me, Feel Me | The Who |
1968 | Congratulations | Cliff Richard |
1998 | When You Believe | Mariah Carey & Whitney Houston |
1965 | The Last Time | The Rolling Stones |
1978 | Who Are You? | The Who |
1960 | I Want To Be Wanted (Per Tutta La Vita) | Brenda Lee |
1958 | It's Only Make Believe | Conway Twitty |
2011 | Just Can't Get Enough | The Black Eyed Peas |
1954 | I Need You Now | Eddie Fisher |
1950 | Foggy Mountain Breakdown | Lester Flatt & Earl Scruggs |
1981 | Keep On Loving You | REO Speedwagon |
1997 | Lovefool | The Cardigans |
1991 | Someday | Mariah Carey |
1991 | It Ain't Over 'till It's Over | Lenny Kravitz |
2001 | Hanging by a Moment | Lifehouse |
1942 | Don't Sit Under the Apple Tree (With Anyone Else But Me) | Glenn Miller |
1992 | Jump | Kris Kross |
1951 | With These Hands | Nelson Eddy & Jo Stafford |
1978 | Dancing in the City | Marshall Hain |
1973 | Nutbush City Limits | Ike & Tina Turner |
1961 | Moon River | Henry Mancini |
1971 | For All We Know | The Carpenters |
1981 | Queen of Hearts | Juice Newton |
1978 | Too Much Too Little Too Late | Johnny Mathis & Deniece Williams |
1994 | Don't Turn Around | Ace 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>
Comma after each value, except the last one
Display records
Display records in a Bootstrap Table
Display records in columns
Display records with Bootstrap pagination
Display records with CSS styles
Escape special characters in a string
Highlight the search term in results
Replace unicode characters by utf-8
Search autocomplete with Typeahead
Search records by an option
Select rows for the current day and month
Short commands