DataTable column search

by padma rubhan

HTML

<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<div class="container">
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </tfoot>        
        <tbody>
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Airi Satou</td>
                <td>Accountant</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
            </tr>
            <tr>
                <td>8</td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
           ...

JavaScript

$(function(){
    $('#example tfoot th').each(function(){
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });
    var table = $('#example').DataTable();
	table.columns().every( function () {
        var that = this;
        $('input', this.footer()).on('keyup change', function(){
            if(that.search() !== this.value){
                that.search(this.value).draw();
            }
        });
    });    
});