Tabellen in Bootstrap
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Tabel</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<style>
.demo-container {
margin: 0 auto;
width: 80%;
max-width: 1200px;
padding: 4em;
}
</style>
</head>
<body>
<div class="demo-container">
<table id="voorbeeld-01" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<thead>
<tr>
<th>Titel</th>
<th>Artiest</th>
<th>Jaar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Celine Dion</td>
<td>My Heart Will Go On</td>
<td>1998</td>
</tr>
<tr>
<td>Sinead O'Connor</td>
<td>Nothing Compares 2 U</td>
<td>1990</td>
</tr>
<tr>
<td>Bryan Adams</td>
<td>(Everything I Do) I Do it For You</td>
<td>1991</td>
</tr>
<tr>
<td>Whitney Houston</td>
<td>I Will Always Love You</td>
<td>1992</td>
</tr>
<tr>
<td>Pink Floyd</td>
<td>Another Brick in the Wall (part 2)</td>
<td>1980</td>
</tr>
<tr>
<td>Irene Cara</td>
<td>Flashdance... What a Feeling</td>
<td>1983</td>
</tr>
<tr>
<td>Elton John</td>
<td>Candle in the Wind '97</td>
<td>1997</td>
</tr>
<tr>
<td>Coolio</td>
<td>Gangsta's Paradise</td>
<td>1995</td>
</tr>
<tr>
<td>Cher</td>
<td>Believe</td>
<td>1998</td>
</tr>
<tr>
<td>Procol Harum</td>
<td>A Whiter Shade of Pale</td>
<td>1967</td>
</tr>
<tr>
<td>Bee Gees</td>
<td>Stayin' Alive</td>
<td>1978</td>
</tr>
<tr>
<td>Kim Carnes</td>
<td>Bette Davis Eyes</td>
<td>1981</td>
</tr>
<tr>
<td>George Harrison</td>
<td>My Sweet Lord</td>
<td>1971</td>
</tr>
<tr>
<td>P Diddy & Faith Evans</td>
<td>I'll Be Missing You</td>
<td>1997</td>
</tr>
<tr>
<td>Britney Spears</td>
<td>Baby One More Time</td>
<td>1999</td>
</tr>
<tr>
<td>Michael Jackson</td>
<td>Billie Jean</td>
<td>1983</td>
</tr>
<tr>
<td>John Travolta & Olivia Newton-John</td>
<td>You're the One That I Want</td>
<td>1978</td>
</tr>
<tr>
<td>USA For Africa</td>
<td>We Are the World</td>
<td>1985</td>
</tr>
<tr>
<td>Hanson</td>
<td>Mmmbop</td>
<td>1997</td>
</tr>
<tr>
<td>Madonna</td>
<td>Vogue</td>
<td>1990</td>
</tr>
<tr>
<td>Spice Girls</td>
<td>Wannabe</td>
<td>1996</td>
</tr>
<tr>
<td>The Village People</td>
<td>YMCA</td>
<td>1978</td>
</tr>
<tr>
<td>Stevie Wonder</td>
<td>I Just Called to Say I Love You</td>
<td>1984</td>
</tr>
<tr>
<td>Los Del Rio</td>
<td>Macarena</td>
<td>1996</td>
</tr>
<tr>
<td>Barbra Streisand</td>
<td>A Woman in Love</td>
<td>1980</td>
</tr>
<tr>
<td>No Doubt</td>
<td>Don't Speak</td>
<td>1997</td>
</tr>
<tr>
<td>Shakira & Wyclef Jean</td>
<td>Hips don't lie</td>
<td>2006</td>
</tr>
<tr>
<td>Kylie Minogue</td>
<td>Can't Get You Out of My Head</td>
<td>2001</td>
</tr>
<tr>
<td>The Rolling Stones</td>
<td>Angie</td>
<td>1973</td>
</tr>
<tr>
<td>Mungo Jerry</td>
<td>In the Summertime</td>
<td>1970</td>
</tr>
<tr>
<td>Lady GaGa</td>
<td>Poker Face</td>
<td>2009</td>
</tr>
<tr>
<td>Madonna</td>
<td>Hung Up</td>
<td>2005</td>
</tr>
<tr>
<td>Shakira</td>
<td>Whenever, Wherever</td>
<td>2002</td>
</tr>
<tr>
<td>Bruce Springsteen</td>
<td>Streets of Philadelphia</td>
<td>1994</td>
</tr>
<tr>
<td>Lou Bega</td>
<td>Mambo No 5 (A Little Bit of ...)</td>
<td>1999</td>
</tr>
<tr>
<td>Aerosmith</td>
<td>I Don't Want to Miss a Thing</td>
<td>1998</td>
</tr>
<tr>
<td>The Fugees</td>
<td>Killing Me Softly With His Song</td>
<td>1996</td>
</tr>
<tr>
<td>Culture Club</td>
<td>Do You Really Want to Hurt Me?</td>
<td>1982</td>
</tr>
<tr>
<td>Madonna</td>
<td>Like a Prayer</td>
<td>1989</td>
</tr>
<tr>
<td>A-Ha</td>
<td>Take On Me</td>
<td>1985</td>
</tr>
<tr>
<td>Las Ketchup</td>
<td>The Ketchup Song (Asereje)</td>
<td>2002</td>
</tr>
<tr>
<td>Snow</td>
<td>Informer</td>
<td>1993</td>
</tr>
<tr>
<td>Aqua</td>
<td>Barbie Girl</td>
<td>1997</td>
</tr>
<tr>
<td>Whitney Houston</td>
<td>I Wanna Dance With Somebody (Who Loves Me)</td>
<td>1987</td>
</tr>
<tr>
<td>Ace of Base</td>
<td>All That She Wants</td>
<td>1993</td>
</tr>
<tr>
<td>Boney M</td>
<td>Rivers of Babylon</td>
<td>1978</td>
</tr>
<tr>
<td>Michael Jackson</td>
<td>Black Or White</td>
<td>1991</td>
</tr>
<tr>
<td>Meat Loaf</td>
<td>I'd Do Anything For Love (But I Won't Do That)</td>
<td>1993</td>
</tr>
<tr>
<td>Bryan Adams, Rod Stewart & Sting</td>
<td>All For Love</td>
<td>1994</td>
</tr>
<tr>
<td>Phil Collins</td>
<td>Another Day in Paradise</td>
<td>1989</td>
</tr>
<tr>
<td>Eiffel 65</td>
<td>Blue (Da Ba Dee)</td>
<td>1999</td>
</tr>
<tr>
<td>Londonbeat</td>
<td>I've Been Thinking About You</td>
<td>1990</td>
</tr>
<tr>
<td>Mariah Carey</td>
<td>Without You</td>
<td>1994</td>
</tr>
<tr>
<td>Abba</td>
<td>Waterloo</td>
<td>1974</td>
</tr>
<tr>
<td>Lipps Inc</td>
<td>Funkytown</td>
<td>1980</td>
</tr>
<tr>
<td>Falco</td>
<td>Rock Me Amadeus</td>
<td>1986</td>
</tr>
<tr>
<td>Band Aid</td>
<td>Do They Know It's Christmas?</td>
<td>1984</td>
</tr>
<tr>
<td>The Black Eyed Peas</td>
<td>Shut Up</td>
<td>2003</td>
</tr>
<tr>
<td>David Bowie</td>
<td>Let's Dance</td>
<td>1983</td>
</tr>
<tr>
<td>Wet Wet Wet</td>
<td>Love is All Around</td>
<td>1994</td>
</tr>
<tr>
<td>Frankie Goes To Hollywood</td>
<td>Relax</td>
<td>1984</td>
</tr>
<tr>
<td>Madonna</td>
<td>Frozen</td>
<td>1998</td>
</tr>
<tr>
<td>Four Non Blondes</td>
<td>What's Up?</td>
<td>1993</td>
</tr>
<tr>
<td>Patrick Hernandez</td>
<td>Born to Be Alive</td>
<td>1979</td>
</tr>
<tr>
<td>Culture Beat</td>
<td>Mr Vain</td>
<td>1993</td>
</tr>
<tr>
<td>Rihanna</td>
<td>Don't Stop the Music</td>
<td>2007</td>
</tr>
<tr>
<td>Eminem</td>
<td>Stan</td>
<td>2000</td>
</tr>
<tr>
<td>Rednex</td>
<td>Cotton Eye Joe</td>
<td>1994</td>
</tr>
<tr>
<td>Haddaway</td>
<td>What is Love?</td>
<td>1993</td>
</tr>
<tr>
<td>Roxette</td>
<td>Joyride</td>
<td>1991</td>
</tr>
<tr>
<td>Robert Miles</td>
<td>Children</td>
<td>1996</td>
</tr>
<tr>
<td>Scatman John</td>
<td>Scatman (Ski-Ba-Bop-Ba-Dop-Bop)</td>
<td>1995</td>
</tr>
<tr>
<td>Boney M</td>
<td>Ma Baker</td>
<td>1977</td>
</tr>
<tr>
<td>Enigma</td>
<td>Sadeness</td>
<td>1991</td>
</tr>
<tr>
<td>Snap</td>
<td>Rhythm is a Dancer</td>
<td>1992</td>
</tr>
<tr>
<td>Roxette</td>
<td>The Look</td>
<td>1989</td>
</tr>
<tr>
<td>F R David</td>
<td>Words</td>
<td>1982</td>
</tr>
<tr>
<td>Duffy</td>
<td>Mercy</td>
<td>2008</td>
</tr>
<tr>
<td>Babylon Zoo</td>
<td>Spaceman</td>
<td>1996</td>
</tr>
<tr>
<td>Kaoma</td>
<td>Lambada</td>
<td>1989</td>
</tr>
<tr>
<td>Baccara</td>
<td>Yes Sir, I Can Boogie</td>
<td>1977</td>
</tr>
<tr>
<td>Boney M</td>
<td>Daddy Cool</td>
<td>1976</td>
</tr>
<tr>
<td>O-Zone</td>
<td>Dragostea Din Tei</td>
<td>2004</td>
</tr>
<tr>
<td>Europe</td>
<td>The Final Countdown</td>
<td>1986</td>
</tr>
<tr>
<td>Bon Jovi</td>
<td>It's My Life</td>
<td>2000</td>
</tr>
<tr>
<td>The Scorpions</td>
<td>Wind of Change</td>
<td>1991</td>
</tr>
<tr>
<td>Murray Head</td>
<td>One Night in Bangkok</td>
<td>1985</td>
</tr>
<tr>
<td>Paul Hardcastle</td>
<td>19</td>
<td>1985</td>
</tr>
<tr>
<td>Emilia</td>
<td>Big Big World</td>
<td>1998</td>
</tr>
<tr>
<td>Youssou N'Dour & Neneh Cherry</td>
<td>7 Seconds</td>
<td>1994</td>
</tr>
<tr>
<td>Laura Branigan</td>
<td>Self Control</td>
<td>1984</td>
</tr>
<tr>
<td>Nelly Furtado</td>
<td>All Good Things (Come to an End)</td>
<td>2006</td>
</tr>
<tr>
<td>The Cranberries</td>
<td>Zombie</td>
<td>1994</td>
</tr>
<tr>
<td>Fool's Garden</td>
<td>The Lemon Tree</td>
<td>1996</td>
</tr>
<tr>
<td>Mike Oldfield</td>
<td>Moonlight Shadow</td>
<td>1983</td>
</tr>
<tr>
<td>Michael Jackson</td>
<td>Earth Song</td>
<td>1995</td>
</tr>
<tr>
<td>Sandra</td>
<td>(I'll Never Be) Maria Magdalena</td>
<td>1985</td>
</tr>
<tr>
<td>Bomfunk MCs</td>
<td>Freestyler</td>
<td>2000</td>
</tr>
<tr>
<td>Alphaville</td>
<td>Big in Japan</td>
<td>1984</td>
</tr>
<tr>
<td>Modern Talking</td>
<td>You're My Heart You're My Soul</td>
<td>1985</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$("#voorbeeld-01").DataTable({
language: {
search: "_INPUT_",
searchPlaceholder: "Zoeken...",
paginate: {
next: 'Volgende »',
previous: '« Vorige '
}
},
paging: true,
searching: true,
responsive: true,
pageLength: 5,
bLengthChange: false,
bInfo: false,
bSort: true,
});
</script>
</body>
</html>