DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.13.4/sp-2.1.2/sl-1.6.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.13.4/sp-2.1.2/sl-1.6.2/datatables.min.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...

JavaScript

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

//works
var table = $('#example').DataTable({
	columnDefs: [
  	{
    	targets: 1,
      render: function (data, type, row) {
      	if (type === 'sp') {
      		return [row[1], row[2], row[3], row[4]];
        }
        return data;
      },
      searchPanes: {
        orthogonal: 'sp'
      }
    }
  ],
  dom: 'Pfrtip',
  searchPanes: {
    columns: [ 1 ]
  },
});