Bootstrap

Tabellen

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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>