Datatable Select / Filter / Search

pre filtered dropdown datatables

by ckmuc

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="//cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css">
<a class="cleanfilters" href="#">Reset Filter and Search</a>
<br>
<br>

<table id="example" class="display" cellspacing="0" width="100%" data-page-length="10" class="display table table-striped table-bordered table-hover table-condensed  dt-responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th class="input">Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
     ...

CSS

tfoot {
	  display: table-header-group;
	}

JavaScript

$(document).ready(function() {

  $('a.cleanfilters').on('click', function(e) {
    alert('resetting');
    $('input').val('').change();
    $("#example").DataTable().search("").draw();
  });

  $('.input').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
  });

  var tabl = $('#example').DataTable({
    "paging": true,
    //"stateSave": true,
    "oSearch": {
      "sSearch": '2011'
    },
    initComplete: function() {
      this.api().columns([1, 2, 3, 4]).every(function() {
					     
        var column = this;
        var c			= column[0];
        var select = $('<select class="col'+c+'"><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) {
          var val = $('<div/>').html(d).text();
          select.append('<option value="' + val + '">' + val + '</option>');
        });


        if (column[0] == 2) { /*here 2 is the third column */
          var valforcol = 'New York'; /* 3 is fourth option of third column */
          $(".col2").val(valforcol).change();
         column.search(valforcol ? '^' + valforcol + '$' : '', true, false).draw() /*apply filter*/
        }


      });


      this.api().columns([0]).every(function() {
        var column = this;
        $('input', this.footer()).on('keyup change', function() {
          if (column.search() !== this.value) {
            column
              .search(this.value)
              .draw();
          }
        });
      });

    }

  });
});