Datatable Select / Filter / Search

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>
        ...

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":'2009'}, 
		initComplete: function () {
			this.api().columns([1,2,3,4]).every( function () {
      	var column = this;
        var select = $('<select><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>' );
      	});
      });
			 
			 
			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();
          }
				});
			});
      
  	}
	});
});