DataTables individual search columns

DataTables individual search columns example.

HTML

<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<table id="example" class="display table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
            <tr>
                <th>IP Address</th>
                <th>Protocol</th>
            </tr>
        </thead>
</table>

CSS

#example tfoot {
    display: table-header-group;
}

JavaScript

currentItem=[{"ip":"192.168.1.0", "protocol": "ssh"},{"ip":"192.168.1.2", "protocol": "tcp"}]

$(document).ready(function () {

    // DataTable
    var table = $('#example').DataTable({
        "data" : currentItem,
        "columns" : [
            { "data" : "ip", "title": "IP Address", "defaultContent": "N.A." },
            { "data" : "protocol", "title": "Protocol", "defaultContent": "N.A." }
        ],
        "aLengthMenu": [[ 5, 10, 50, 100, -1], [ 5, 10, 50, 100, "All"]]

    });


    $('#example thead tr th').each( function () {
      var title = $('#example thead th').eq( $(this).index() ).text();
      $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
      console.log("ola")
    } );
    




    // Apply the search
    
    table.columns().each(function (colIdx) {
         	var that = this;
          $('input').on( 'keyup', function () {
          	
          	console.log(colIdx)
              table
                  .columns( colIdx )
                  .search( this.value )
                  .draw();
          } );
        
    });
});