DataTable Dropdown Filter

by Dwi Adi Laksono

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/dt-1.10.12/fc-3.2.2/fh-3.1.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/dt-1.10.12/fc-3.2.2/fh-3.1.2/datatables.min.js"></script>
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Olivia</td>
      <td>Liang</td>
      <td>Support Engineer</td>
      <td>Singapore</td>
      <td>64</td>
      <td>2011/02/03</td>
      <td>$234,500</td>
      <td>2120</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Bruno</td>
      <td>Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>38</td>
      <td>2011/05/03</td>
      <td>$163,500</td>
      <td>6222</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Sakura</td>
      <td>Yamamoto</td>
      <td>Support Engineer</td>
      <td>Tokyo</td>
      <td>37</td>
      <td>2009/08/19</td>
      <td>$139,575</td>
      <td>9383</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Thor</td>
      <td>Walton</td>
      <td>Developer</td>
      <td>New York</td>
      <td>61</td>
      <td>2013/08/11</td>
      <td>$98,540</td>
      <td>8327</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Finn</td>
      <td>Camacho</td>
      <td>Support Engineer</td>
      <td>San Francisco</td>
      <td>47</td>
      <td>2009/07/07</td>
      <td>$87,500</td>
     ...

CSS

th,
td {
  white-space: nowrap;
}
div.dataTables_wrapper {
  width: 600px;
  margin: 0 auto;
}

JavaScript

$(document).ready(function() {
  $('#example').DataTable({
	scrollY: 300,
    scrollX: true,
    scrollCollapse: true,
    paging: true,
    fixedColumns: true,
   initComplete: function () {
            var columnsCustom = [2];
            var columnId = ["tier"];
            for (var i = 0; i < columnsCustom.length; i++) {
                this.api().columns(columnsCustom[i]).every( function () {
                    var column = this;
                    var select = $('<select id="' + columnId[i] +'"><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
     
                            column
                                .search( val ? '^' + val + '$' : '', true, false )
                                .draw();
                        } );
     
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="' + d + '">' + d + '</option>' )
                    } );
                } );
            }
        },
  });
});