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 |
---|---|---|
1960 | My Heart Has a Mind of It's Own | Connie Francis |
1965 | (I Can't Get No) Satisfaction | The Rolling Stones |
1950 | Goodnight, Irene | Frank Sinatra |
1978 | Miss You | The Rolling Stones |
2008 | Violet Hill | Coldplay |
1952 | A Guy is a Guy | Doris Day |
1972 | Nice To Be With You | Gallery |
1981 | Bette Davis Eyes | Kim Carnes |
1993 | If | Janet Jackson |
1960 | Good Timin' | Jimmy Jones |
1991 | Joyride | Roxette |
2008 | Womanizer | Britney Spears |
1988 | Two Hearts | Phil Collins |
1964 | Java | Al Hirt |
1972 | Hurting Each Other | The Carpenters |
1968 | Magic Bus | The Who |
1957 | Great Balls of Fire | Jerry Lee Lewis |
1993 | All That She Wants | Ace of Base |
1984 | Last Christmas | Wham! |
1986 | Everybody Have Fun Tonight | Wang Chung |
2008 | I am Yours | Jason Mraz |
1997 | Where Have All the Cowboys Gone? | Paula Cole |
1950 | Mona Lisa | Nat King Cole |
1951 | Mockin' Bird Hill | Les Paul & Mary Ford |
1977 | Hot Line | Sylvers |
1983 | Vamos a la playa | Righeira |
1952 | The Glow-Worm | The Mills Brothers |
1963 | One Fine Day | The Chiffons |
1969 | It's Your Thing | The Isley Brothers |
1991 | Change | Lisa Stansfield |
1993 | Just Kickin' It | Xscape |
2006 | Jump | Madonna |
1981 | 9 to 5 | Dolly Parton |
1989 | Cherish | Madonna |
1983 | 1999 | Prince |
1992 | Ain't No Doubt | Jimmy Nail |
1987 | Living in a Box | Living In A Box |
1998 | Torn | Natalie Imbruglia |
1925 | If You Knew Susie (Like I Know Susie) | Eddie Cantor |
1972 | Without You | Harry Nilsson |
1972 | Guitar Man | Bread |
1951 | Cold, Cold Heart | Tony Bennett |
1943 | Paper Doll | The Mills Brothers |
1995 | Gangsta's Paradise | Coolio |
2008 | Miss Independent | Ne-Yo |
1954 | Stranger in Paradise | Tony Martin |
1984 | The Reflex | Duran Duran |
1987 | Livin' On a Prayer | Bon Jovi |
2008 | Tattoo | Jordin Sparks |
2013 | Roar | Katy Perry |
1976 | Disco Lady | Johnnie Taylor |
1980 | Working My Way Back to You | The Detroit Spinners |
1929 | Am I Blue? | Ethel Waters |
1982 | Mickey | Toni Basil |
1937 | They Can't Take That Away From Me | Fred Astaire |
1996 | Hey Lover | LL Cool J |
1997 | I Want You Back | N Sync |
1990 | Do You Remember? | Phil Collins |
1995 | Colors of the Wind | Vanessa Williams |
1974 | The Way We Were | Barbra Streisand |
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