Individual Column filtering in header

http://datatables.net/

by Dan Murphy

HTML

<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<table id="example" class="table table-striped table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Description</th>
        </tr>
    </thead>
    <thead>
        <tr>
            <td>ID</td>
            <td>Description</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1234</td>
            <td>Ice Cream</td>
        </tr>
        <tr>
            <td>1235</td>
            <td>Unicorns</td>
        </tr>
        <tr>
            <td>1236</td>
            <td>Cats</td>
        </tr>
        <tr>
            <td>1237</td>
            <td>Dogs</td>
        </tr>
        <tr>
            <td>1238</td>
            <td>Baseball</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example thead td').each( function () {
        var title = $('#example thead td').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
            table
                .column( colIdx )
                .search( this.value )
                .draw();
        } );
    } );
} );