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({
     destroy: true,
        "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"]],
        "scrollY":        "400px",
        "scrollCollapse": true,
		    "responsive": true

    });


    $('#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) {
        $('input', table.column(colIdx).footer()).on('keyup change', function () {
            table.column(colIdx)
                .search(this.value)
                .draw();
        });
    });
});