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 | Switch | Will Smith |
1987 | Somewhere Out There | Linda Ronstadt & James Ingram |
1975 | Low Rider | War |
1998 | Stand By Me | 4 The Cause |
1992 | Sweat (A La La La La Song) | Inner Circle |
2004 | I Don't Wanna Know | Mario Winans |
2004 | Me, Myself & I | Beyonce |
2011 | Born This Way | Lady GaGa |
1951 | Tennessee Waltz | Anita O'Day |
1971 | Reason to Believe | Rod Stewart |
1997 | Block Rockin' Beats | The Chemical Brothers |
1967 | Georgy Girl | The Seekers |
1958 | La Bamba | Ritchie Valens |
1962 | The Wanderer | Dion |
2007 | Lovestoned | Justin Timberlake |
1980 | Sexy Eyes | Dr Hook |
2006 | Patience | Take That |
1941 | Stardust | Artie Shaw |
1965 | Goldfinger | Shirley Bassey |
1974 | Freebird | Lynyrd Skynyrd |
1994 | Doop | Doop |
2004 | Slow Jamz | Twista |
1984 | Original Sin | INXS |
2007 | Glamorous | Fergie & Ludacris |
1968 | White Room | Cream |
1992 | How Do You Do! | Roxette |
1998 | God is a DJ | Faithless |
1976 | Hurricane | Bob Dylan |
1982 | Rosanna | Toto |
1985 | Small Town | John Cougar Mellencamp |
1994 | Always | Bon Jovi |
1978 | Fool (If You Think It's Over) | Chris Rea |
1986 | West End Girls | The Pet Shop Boys |
1986 | Atlantis Is Calling (S.O.S. For Love) | Modern Talking |
2009 | Thinking of You | Katy Perry |
1996 | Always Be My Baby | Mariah Carey |
1965 | My Girl | The Temptations |
1944 | Into Each Life Some Rain Must Fall | Ella Fitzgerald & The Ink Spots |
1978 | Follow You Follow Me | Genesis |
1961 | Tossing & Turning | Bobby Lewis |
1976 | The Best Disco in Town | Ritchie Family |
1987 | Whenever You Need Somebody | Rick Astley |
1980 | Fashion | David Bowie |
1992 | End of the Road | Boyz II Men |
1961 | Goodbye Cruel World | James Darren |
1999 | Where My Girls At? | 702 |
1966 | It's a Man's Man's Man's World | James Brown |
2002 | The Logical Song | Scooter |
1969 | In the Year 2525 (Exordium & Terminus) | Zager & Evans |
2009 | Fire Burning | Sean Kingston |
1993 | Mr Wendal | Arrested Development |
1960 | Ramona | Blue Diamonds |
1993 | I'd Do Anything For Love (But I Won't Do That) | Meat Loaf |
1988 | Man in the Mirror | Michael Jackson |
1955 | Learnin' the Blues | Frank Sinatra |
2002 | Cleanin' Out My Closet | Eminem |
1960 | Wonderful World | Sam Cooke |
1972 | Daddy Don't You Walk So Fast | Wayne Newton |
1977 | Ain't Gonna Bump No More (With No Big Fat Woman) | Joe Tex |
1992 | Everything About You | Ugly 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>
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