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 |
---|---|---|
2005 | Dare | Gorillaz |
1987 | So Emotional | Whitney Houston |
1967 | Penny Lane | The Beatles |
1995 | Free As a Bird | The Beatles |
2001 | Survivor | Destiny's Child |
2005 | Inside Your Heaven | Carrie Underwood |
1982 | I Love Rock 'n' Roll | Joan Jett & The Blackhearts |
1990 | Thieves in the Temple | Prince |
2001 | Miss California | Dante Thomas |
1992 | Jump Around | House of Pain |
2000 | Case Of The Ex (Whatcha Gonna Do) | Mya |
2001 | Overload | The Sugababes |
2004 | I Don't Wanna Know | Mario Winans |
1997 | Samba De Janeiro | Bellini |
1972 | Telegram Sam | T Rex |
1980 | Sexy Eyes | Dr Hook |
1963 | Deep Purple | Nino Tempo & April Stevens |
1957 | Yes Tonight Josephine | Johnnie Ray |
1975 | Island Girl | Elton John |
1971 | Joy to the World | Three Dog Night |
2003 | Shut Up | The Black Eyed Peas |
1945 | Chickery Chick | Sammy Kaye |
1953 | Pretend | Nat King Cole |
1986 | The Next Time I Fall | Peter Cetera & Amy Grant |
1991 | Cry For Help | Rick Astley |
1987 | I Still Haven't Found What I'm Looking For | U2 |
1963 | Surf City | Jan & Dean |
1969 | Dizzy | Tommy Roe |
1949 | Forever & Ever | Russ Morgan |
1977 | We're All Alone | Rita Coolidge |
1938 | A-Tisket A-Tasket | Ella Fitzgerald |
1985 | There Must Be an Angel (Playing With My Heart) | The Eurythmics |
2006 | Me & U | Cassie |
1945 | It's Been a Long, Long Time | Harry James |
1993 | Dreams | Gabrielle |
1948 | Little White Lies | Dick Haymes |
2009 | Breakeven | The Script |
1956 | Just Walkin' in the Rain | Johnnie Ray |
1974 | Rebel Rebel | David Bowie |
1976 | Shannon | Henry Gross |
1966 | Bend It | Dave Dee, Dozy, Beaky, Mick & Tich |
1990 | Killer | Adamski |
1950 | Rag Mop | The Ames Brothers |
1983 | It's Raining Men | The Weather Girls |
1954 | Shake, Rattle & Roll | Bill Haley & his Comets |
1995 | If You Love Me | Brownstone |
2002 | Gimme the Light | Sean Paul |
1976 | In Zaire | Johnny Wakelin |
2007 | Hate That I Love You | Rihanna |
2001 | Pop | N Sync |
1989 | What I Am | Edie Brickell & The New Bohemians |
1913 | When Irish Eyes Are Smiling | Chauncy Olcott |
1990 | Everybody Everybody | Black Box |
1986 | Something About You | Level 42 |
1962 | Sealed With a Kiss | Brian Hyland |
1981 | Abacab | Genesis |
2002 | Work It | Missy 'Misdemeanor' Elliott |
1984 | Still Loving You | The Scorpions |
1995 | Have You Ever Really Loved a Woman? | Bryan Adams |
1984 | Sad 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>
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