DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
    <div class="container">
      <table id="example" class="display">
  <thead>
    <tr>
      <th>Field</th>
      <th>Referee</th>
      <th>Assistant Referee</th>
      <th>Referee Backup</th>
      <th>Assistant Backup</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Field 1</td>
      <td>Referee 1</td>
      <td>Assistant Referee 1</td>
      <td>Referee Backup</td>
      <td>Assistant Backup</td>
    </tr>
    <!-- Add more rows as needed -->
    <!-- Random data for demonstration purposes -->
    <tr>
      <td>Field 2</td>
      <td>Referee</td>
      <td>Assistant Referee</td>
      <td>Referee Backup</td>
      <td>Assistant Backup</td>
    </tr>
    <tr>
      <td>Field 3</td>
      <td>Referee 3</td>
      <td>Assistant Referee 3</td>
      <td>Referee Backup</td>
      <td>Assistant Backup</td>
    </tr>
    <tr>
      <td>Field 4</td>
      <td>Referee 2</td>
      <td>Assistant Referee 2</td>
      <td>Referee Backup 2</td>
      <td>Assistant Backup 2</td>
    </tr>
    <tr>
      <td>Field 5</td>
      <td>Referee 5</td>
      <td>Assistant Referee 5</td>
      <td>Referee Backup 2</td>
      <td>Assistant Backup 2</td>
    </tr>
    <tr>
      <td>Field 6</td>
      <td>Referee 6</td>
      <td>Assistant Referee 6</td>
      <td>Referee Backup 2</td>
      <td>Assistant Backup 2</td>
    </tr>
    <tr>
      <td>Field 7</td>
      <td>Referee 7</td>
      <td>Assistant Referee 7</td>
      <td>Referee Backup 2</td>
      <td>Assistant Backup 2</td>
    </tr>
    <tr>
      <td>Field 8</td>
      <td>Referee 8</td>
      <td>Assistant Referee 8</td>
      <td>Referee Backup</td>
      <td>Assistant Backup</td>
    </tr>
    <tr>
      <td>Field 9</td>
      <td>Referee 9</td>
      <td>Assistant Referee 9</td>
      <td>Referee Backup</td>
      <td>Assistant Backup</td>
   ...

JavaScript

//does not work
//var table = $('#table').dataTable();

//works
var table = $('#example').DataTable();